JS / DOM

JS / DOM
目录

DOM

节点

事件

dom查询

获取元素节点的子节点

获取父节点和兄弟节点

获取body

获取html根标签

获取页面所有元素

根据class获取元素

常用选择器

DOM增删改

createElement()

createTextNode()

appendChild()

insertBefore()

replaceChild()

removeChild()

修改节点内的HTML代码

增删改练习

使用DOM操作CSS

获取元素的内联样式

获取元素当前显示的样式

其他样式相关的属性

DOM

Document Object Model

文档表示的是整个HTML网页文档

对象表示将网页中的每一个部分都转换为了一个对象

模型表示对象之间的关系，方便我们获取对象

节点

网页中的每一个部分都是节点

节点分为四类：

文档节点：整个HTML文档

元素节点：HTML文档中的HTML标签

属性节点：元素的属性

文本节点：HTML标签中的文本内容

浏览器已经为我们提供文档节点，这个对象是window属性

可以在页面中直接使用，文档节点代表的是整个网页

var btn = document.getElementById("btn")

修改按钮的文字

btn.innerHTML="buttonbutton"

btn.innerText 和 innerHTML相似

事件

文档或浏览器窗口中发生的一些特定的交互瞬间

用户和浏览器之间的交互行为，如点击按钮，鼠标移动，关闭窗口

可以为按钮的对应事件绑定处理函数的形式来响应事件

var btn = document.getElementById("btn") //先获取元素

btn.οnclick=function(){ //为单击事件绑定的函数，称为单击响应函数

alert('hello!');

} //属于回调函数事件触发时执行函数

script标签需要写在按钮标签后面

浏览器加载页面的顺序：自上而下

如果写在前面 head里可以利用onload事件，会在整个页面加载完成之后才触发

window.onload = function(){

        var btn = document.getElementById("btn") //先获取元素

        btn.οnclick=function(){ //为单击事件绑定的函数，称为单击响应函数

                alert('hello!');

        }

}

onload事件会在整个页面加载完成后才触发，为window绑定一个onload事件可以确保我们的代码执行时所有的dom对象都已经加载完毕了

写在下面性能更好一点，但差距不大

dom查询

获取元素节点

通过document对象调用

getElementById() 通过id属性获取一个元素节点对象

getElementsByTagName() 通过标签名获取一组元素节点对象

getElementsByName() 通过name属性获取一组元素节点对象

如果想读取标签的属性值直接用 .

btn[i].value

btn[i].name

唯独class要用btn[i].className

获取元素节点的子节点

通过具体的元素节点调用

1.getElementsByTagName() 方法返回当前节点的指定标签名后代节点

2.childNodes 属性表示当前节点的所有子节点（包括空白文本） DOM标签间的空白（换行）也会算进个数里被当成了文本对象在IE8及以下的浏览器中，不会将空白当成子节点

用.children属性可以获取当前元素的所有子节点而不包括文本节点

3.firstChild 属性表示当前节点的第一个子节点（包括空白文本）用,firstElementChild可以获取当前元素的第一个子元素，不包括空白（不建议使用，需ie9+，不支持ie8及以下）

4.lastChild 属性表示当前节点的最后一个子节点（包括空白文本）

获取父节点和兄弟节点

1.parentNode 属性表示当前节点的父节点唯一 innerHTML是所有父节点内的内容（含标签） innerText可以获取元素内部的文本内容（父节点内的子节点的文本，不含标签）

2.previousSibling 属性表示当前节点的前一个兄弟节点包括空白文本，previousElementSibling不包括空白文本，ie8及以下不支持

3.nextSibling 属性表示当前节点的后一个兄弟节点包括空白文本

单击响应函数
```
function myClick(idStr,fun){
    var btn=document.getElementById(idStr);
    btn.onclick=fun;
}
 
//idStr要绑定单击响应函数的对象的ID属性值
//fun 事件的回调函数 
 
myClick("btn01",function(){
    alert("hello!")
})
```
注意：onclick事件无大写！！！！不是onClick！！！

获取标签中的文本节点

1.alert(bj.innerText)

2.alert(bj.innerHTML)

3.var fc=bj.firstChild

alert(fc.nodeValue)

获取body

document中有一个属性body

保存的是body的引用

document.body

获取html根标签

document.documentElement

获取页面所有元素

document.all

document.getElementsByTagName('*')

根据class获取元素

document.getElementsByClassName(' ')

ie9及以上支持

常用选择器

document.querySelector(".box div")

接收css选择器作为参数

ie8+

使用该方法总会返回唯一的元素，如果满足条件的元素有多个，那只会返回第一个

document.querySelectorAll(" ")

将符合条件的元素封装到一个数组中，能返回符合条件的多个元素，即使符合条件的只有一个，也返回数组

DOM增删改

createElement()

创建元素节点

需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回

var li = document.createElement("li") //创建一个新的元素节点

createTextNode()

创建一个文本节点对象

需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

var gzText=document.createTextNode("广州")

appendChild()

把新的子节点添加到指定节点

向一个父节点中添加一个新的子节点

用法：父节点.appendChild(子节点)

将gzText设置为li的子节点

li.appendChild(gzText)

将li设置为页面中city的子节点

var city=document.getElementById("city")

city.appendChild('li')

insertBefore()

在指定的子节点前面插入新的子节点

父节点.insertBefore(新节点，旧节点)

var bj=document.getElementById("bj")

city.insertBefore(li,bj)

replaceChild()

替换子节点

父节点.replaceChild(新节点,旧节点)

removeChild()

删除子节点

父节点.removeChild(子节点)

city.removeChild(‘li’)

最常用：

子节点.parentNode.removeChild(子节点)

不用获取父节点了

修改节点内的HTML代码

用innerHTML

也可以实现增加子节点

如果不想删除原内容则用city.innerHTML+= ...

一般情况下两种方式结合使用

var li = document.createElement("li")

li.innerHTML="广州"

city.appendChild(li)

增删改练习
- 点击超链接后，超链接会跳转页面，这个是超链接的默认行为，但是我们不希望出现默认行为，可以通过在响应函数（如onclick）的最后return false来取消默认行为
- 也可以在a标签中定义href属性为
- alert的内容为3
- 因为for循环会在页面加载完成之后立即执行，而单击响应函数会在超链接被点击时才执行，当相应函数执行时 for循环早已执行完毕。
- ```
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #employeeTable {
            margin: 0 auto;
            margin-top: 50px;
            border: 1px solid black;
        }
 
        th {
            padding: 6px;
        }
 
        td {
            padding: 6px;
        }
 
        form {
            margin: 0 auto;
            margin-top: 50px;
            height: 200px;
            width: 300px;
            border: 1px solid black;
        }
 
        h4 {
            text-align: center;
        }
 
        #sub {
            width: 80px;
            margin-left: 110px;
 
 
        }
 
        li {
            list-style: none;
        }
    </style>
    <script>
        window.onload = function () {
            var emp = document.getElementById('employeeTable')
            //封装点击事件
            function myClick(str, fun) {
                var btn = document.getElementById(str)
                btn.onclick = fun
            }
 
            // 删除方法
 
 
            // 删除按钮点击事件绑定
            function deleteEmp() {
                var del = document.querySelectorAll('.del')
                for (var i = 0; i < del.length; i++) {
                    del[i].onclick = function () {
                        var tr = this.parentNode.parentNode
                        let name = tr.getElementsByTagName('td')[0].innerText
                        var res = confirm("确认删除" + name + "吗？")
                        if (res) {
                            tr.parentNode.removeChild(tr)
                        }
                        return false
                    }
                }
            }
            deleteEmp()
 
            myClick('sub', function () {
                let name = document.getElementById('name').value
                let email = document.getElementById('email').value
                let salary = document.getElementById('salary').value
                let newEmpTr = document.createElement('tr')                newEmpTr.innerHTML = "" + name + "" + "" + email + "" + "" + salary + "" + 'Delete'
                emp.appendChild(newEmpTr)
                deleteEmp()
            })
 
 
 
        }
    </script>
</head>
 
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@tom.com</td>
            <td>8000</td>
            <td><a href="#" class="del">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="#" class="del">Delete</a></td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="#" class="del">Delete</a></td>
        </tr>
 
    </table>
 
    <form action="">
        <h4>添加新员工</h4>
        <ul>
            <li>name: <input type="text" id="name"></li>
            <li>email: <input type="email" id="email"></li>
            <li>salary: <input type="text" id="salary"></li>
        </ul>
        <button id="sub">submit</button>
    </form>
</body>
 
</html>
```
使用DOM操作CSS

获取元素的内联样式

语法

元素.style.样式名=样式值（字符串）

box1.style.width=“100px”

注意：如果css样式名中有- 如background-color，这种名称在JS中是不合法的

需要写成 backgroundColor 去掉减号，修改成驼峰命名法

通过style属性设置、读取的样式都是内联样式，无法样式表中的样式

而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

但是如果在样式中写了 !important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

获取元素当前显示的样式

currentStyle和getComputedStyle()都只读，不能修改！！！

如果要修改必须通过style属性

IE

语法：元素.currentStyle.样式名

可以读取当前元素正在显示的样式，谁生效就显示谁，内联和样式表的都能显示

只有IE支持

在其他浏览器中可以使用

getComputedStyle()这个方法来获取元素当前的样式，是window的方法

ie9及以上才支持

参数：第一个为要获取样式的元素，第二个传递一个伪元素，一般传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值，如width未设置，不会获取到auto而是返回一个实际长度。

getComputedStyle(box1,null).backgroundColor

兼容使用方法：

定义一个函数用来获取指定元素当前的样式

参数：obj要获取样式的元素 name 要获取的样式名

function getStyle(obj,name){

if(window.getComputedStyle){

                //判断浏览器是否有该方法，如果不加window.则getComputedStyle在函数内就是一个变量，找不到会报错，而加了就是window的一个属性，找不到会返回undefined

                return getComputedStyle(obj,null)[name];

        }else{

                //用中括号传递变量，如果用.则获取样式名为name的样式

          return obj.currentStyle[name];

                }

}

相当于：

return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];

其他样式相关的属性

clientHeight：获取元素的可见高度，只读

clientWidth：获取元素的可见宽度，只读

返回值不带px，可以直接计算，包括内容区和内边距，不包括边框。

offsetWidth：获取元素的整个宽度，只读

offsetHeight：获取元素的整个高度，只读

包括内容区域、内边距和边框

offsetParent：获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素，只要position不是static（为relative或者absolute），如果所有祖先元素都没有开启定位，则返回body

offsetLeft：当前元素相对于其定位父元素的水平偏移量，只读

offsetTop：当前元素相对于其定位父元素的垂直偏移量，只读

scrollHeight 整个滚动的高度（被overflow遮住的），只读

scrollWidth 整个滚动的宽度，只读。

可以获取元素整个滚动区域的宽高。

scrollLeft 水平滚动条水平滚动的距离

scrollTop 垂直滚动条垂直滚动的距离

当有滚动条时输出clientHeight 需要去掉滚动条的宽度

当scrollHeight - scrollTop == clientHeight 说明垂直滚动条到底了

滚动条整个高度-滚动的距离==可视高度

当scrollWidth-scrollLeft==clientLeft 说明水平滚动条到底了

滚动条滚动事件 onscroll

如果给按钮增加disabled的则按钮处于不可用状态
相关阅读:
独立站引流新玩法
 剪枝基础与实战(5): 剪枝代码详解
 以太坊学习三: Merkle树和验证
 NVMe SSD 学习总结：01 SSD技术演进（从SATA SSD 到NVMe SSD）
密码学技术总结
 Linux多线程之线程控制
 LeetCode | 719. Find K-th Smallest Pair Distance
如何写出同事看不懂的Java代码？
Java中的super关键字
 Python 基于OpenCV+face_recognition+tkinter实现人脸特征监测
原文地址：https://blog.csdn.net/qq_39565174/article/details/126094273

DOM

节点

事件

dom查询

获取元素节点的子节点

获取父节点和兄弟节点

获取body

获取html根标签

获取页面所有元素

根据class获取元素

常用选择器

DOM增删改

createElement()

createTextNode()

appendChild()

insertBefore()

replaceChild()

removeChild()

修改节点内的HTML代码

增删改练习

使用DOM操作CSS

获取元素的内联样式

获取元素当前显示的样式

其他样式相关的属性