DOM,Document Object Model

文档对象模型，通过DOM可以来任意来修改网页中各个内容

文档
文档指的是网页，一个网页就是一个文档

对象
对象指将网页中的每一个节点都转换为对象

转换完对象以后，就可以以一种纯面向对象的形式来操作网页了

模型
模型用来表示节点和节点之间的关系，方便操作页面
节点（Node）
节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
虽然都是节点，但是节点的类型却是不同的

常用的节点

文档节点 （Document），代表整个网页  
    元素节点（Element），代表网页中的标签  
    属性节点（Attribute），代表标签中的属性  
    文本节点（Text），代表网页中的文本内容

DOM操作

DOM查询

在网页中浏览器已经为我们提供了document对象，
它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
document查询方法：
根据元素的id属性查询一个元素节点对象：
document.getElementById(“id属性值”);
根据元素的name属性值查询一组元素节点对象:
document.getElementsByName(“name属性值”);
根据标签名来查询一组元素节点对象：
document.getElementsByTagName(“标签名”);返回一个类数组对象

元素的属性：
读取元素的属性：
语法：元素.属性名
例子：ele.name
ele.id
ele.value
ele.className
注意：class属性不能采用这种方式，
读取class属性时需要使用元素.className

修改元素的属性：
语法：元素.属性名 = 属性值

innerHTML
使用该属性可以获取或设置元素内部的HTML代码

DOM查询

A.通过document对象查询

①根据元素的id属性查询一个元素节点对象： document.getElementById(“id属性值”);

②根据元素的name属性值查询一组元素节点对象: document.getElementsByName(“name属性值”);

③根据标签名来查询一组元素节点对象： document.getElementsByTagName(“标签名”); 此方法会给我们返回一个数组对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中返回。

④如果想要读取元素节点的属性，直接使用：元素.属性名; 例子：元素.id，元素.name，元素.value，但是读取class属性时不能直接使用class，而是classname。

⑤document.body：获取页面中的body标签。

⑥document.documentElement：获取页面中html根标签。

⑦document.all：获取页面中的所有元素，相当于document.getElementsByTagName("*")。

⑧document.getElementsByClassName()：根据元素的class属性值查询一组元素节点对象。（这个方法不支持IE8及以下的浏览器,若想实现此种功能可以使用下面的方法）

⑨document.querySelector(CSS_Select_String)：根据CSS选择器去页面中查询一个元素，如果匹配到的元素有多个，则它会返回查询到的第一个元素。例子：

document.querySelector(".box1 div");

⑩document.querySelectorAll(CSS_Select_String)：根据CSS选择器去页面中查询一组元素，会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个。

B.通过具体的元素节点调用 ①元素.getElementsByTagName():通过标签名查询当前元素的指定后代元素

②元素.childNodes：获取当前元素的所有子节点，会获取到空白的文本子节点。childNodes属性会获取包括文本节点在内的所有节点，根据规则标签间的空白也会当成文本节点。

③元素.children：获取当前元素的所有子元素。

④元素.firstChild：获取当前元素的第一个子节点，会获取到空白的文本子节点。

⑤元素.lastChild：获取当前元素的最后一个子节点。

⑥元素.parentNode：获取当前元素的父元素。

⑦元素.previousSibling： eviousElementSibling：获取前一个兄弟元素，IE8及以下不支持。

⑧元素.nextSibling：获取当前元素的后一个兄弟节点

⑨innerHTML和innerText的区别：这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性，两个属性作用类似，都可以获取到标签内部的内容。不同是innerHTML会获取到html标签，而innerText会自动去除标签，如果使用这两个属性来设置标签内部的内容时，没有任何区别的。

⑩元素.firstChild.nodeValue：读取标签内部的文本内容。

DOM修改

①document.createElement(“TagName”)：可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。

②document.createTextNode(“textContent”)：可以根据文本内容创建一个文本节点对象。

③父节点.appendChild(子节点)：向父节点中添加指定的子节点。

④父节点.insertBefore(新节点,旧节点)：将一个新的节点插入到旧节点的前边。

⑤父节点.replaceChild(新节点,旧节点)：使用一个新的节点去替换旧节点。

⑥父节点.removeChild(子节点)：删除指定的子节点推荐方式：子节点.parentNode.removeChild(子节点)，这样可以实现节点自己删除自己。

⑦元素.innerHTML：以上方法其实均是对元素的innerHTML属性进行修改，因此可以直接对innerHTML进行修改以达到同样的目的。例子：

<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var li = document.createElement("li");
            li.innerHTML = "singing";
            var hb = document.getElementById("hobby");
            hb.append(li);
        }; 
    </script>
</head>
<body>
    <ul id="hobby">
        <li id="bb">basketball</li>
        <li id="fb">football</li>
        <li id="rn">running</li>
        <li id=dc>dancing</li>
    </ul>
</body>

</html>

这样就不用在创建完li对象之后再创建文本对象，而是直接修改li对象的属性innerHTML以实现绑定的功能。

⑧window.confirm()：与alert用法相同，用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字显现出来。

例子：

confirm("确认要添加吗?");

在这里插入图片描述
如果用户点击确定会返回true，点击取消则返回false。因此常常根据返回的boolean值做是否修改的判断。

⑨易错点：a的索引问题–for循环和响应函数的执行顺序

例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var ul = document.getElementById('hobby');
            var a = document.getElementsByTagName("a")[0];
            console.log(a);
            for(var i=0;i<3;i++){
                a.onclick = function(){
                    alert(i);
                };
            }
        };
    </script>
</head>
<body>
    <ul id="hobby">
        <li id="bb">basketball</li>
        <li id="fb">football</li>
        <li id="rn">running</li>
        <li id=dc>dancing</li>
        <li id=a><a href='javascript:;'>TEST</a></li>
    </ul>
</body>

</html>

结果：

分析：若只考虑通常的上下文代码关系的话，即若代码从上往下执行，则a的onclick属性应该被连续的赋值了三次，最后一次的结果应该是一个在浏览器返回i = 2的alert语句；但是根据最终的结果发现，最终返回的是3，刚好超出for循环的范围。

解释：for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕。

DOM对CSS的操作

①读取内联样式元素.style.样式名：使用style属性来读取元素的内联样式。例如：元素.style.width 元素.style.height

注意： Ⅰ 如果样式名中带有-，则需要将样式名修改为驼峰命名法将-去掉，然后将之后的字母改大写。比如： backgroundcolor > backgroundColor borderwidth > borderWidth

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

例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            width : 200px;
            height : 200px;
            background-color : blue;
        }
    </style>
    <script>
        window.onload = function(){
            box.style.backgroundColor = "yellow";
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>

</html>

修改内联样式：语法：元素.style.样式名 = 样式值通过style修改和读取的样式都是内联样式，由于内联样式的优先级比较高，所以我们通过JS来修改的样式，往往会立即生效。但是如果样式中设置了!important，则内联样式将不会生效，所以尽量不要为样式添加!important。

②读取元素的当前样式正常浏览器使用getComputedStyle() 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式。如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个确定的长度。

参数：

1.要获取样式的元素
2.可以传递一个伪元素，一般传null

例子：

获取元素的宽度
getComputedStyle(box , null)[“width”];
通过该方法读取到样式都是只读的不能修改

IE8 使用currentStyle 语法：元素.currentStyle.样式名例子：

box.currentStyle[“width”]

通过这个属性读取到的样式是只读的不能修改

实现兼容性
先上代码：

/*  
* 定义一个函数，用来获取指定元素的当前的样式  
* 参数：  
* obj 要获取样式的元素  
* name 要获取的样式名  
*/  
function getStyle(obj , name){  
//对象.属性不存在，不会报错，如果直接寻找对象，（当前作用域到全局作用域）找不到会报错  
    if(window.getComputedStyle){  
        //正常浏览器的方式，具有getComputedStyle()方法  
        return getComputedStyle(obj , null)[name];  
    }else{  
        //IE8的方式，没有getComputedStyle()方法  
        return obj.currentStyle[name];  
    }  	  
}

在if语句中的window是必要的，因为如果没有window，则此时括号内是一个变量，如果解析器找不到这个变量则会报错；但是加了window之后就成了window对象的属性，若找不到这个属性只会返回undefined，而不会报错。

③其他的样式相关的属性
注意：以下样式都是只读的,未指明偏移量都是相对于当前窗口左上角

1.clientHeight：元素的可见高度，包括元素的内容区和内边距的高度。

2.clientWidth：元素的可见宽度，包括元素的内容区和内边距的宽度。

3.offsetHeight：整个元素的高度，包括内容区、内边距、边框。

4.offfsetWidth：整个元素的宽度，包括内容区、内边距、边框。

5.offsetParent：当前元素的定位父元素。即离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位relative，则返回body。

6.offsetLeft，offsetTop：当前元素和定位父元素之间的偏移量。offsetLeft水平偏移量 offsetTop垂直偏移量

7.scrollHeight，scrollWidth：获取元素滚动区域的高度和宽度。

8.scrollTop，scrollLeft：获取元素垂直和水平滚动条滚动的距离

9.判断滚动条是否滚动到底：

垂直滚动：scrollHeight -scrollTop = clientHeight
水平滚动：scrollWidth -scrollLeft = clientWidth

10.滚动条的滚动触发：onscroll，该事件会在元素的滚动条滚动时触发。

11.disabled属性：该属性可以设置一个元素是否禁用，如果设置为true，则元素禁用，如果设置为true，则可用。例如：

<input type="checkbox" disabled="disabled"/>test