第十一节: JavaScript DOM 操作

之前学习的属于JS的核心语法,ECMA的语法，接下来开始我们就要学习JS控制页面上的元素了。

1. DOM认知

DOM（Document Object Model，文档对象模型）描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。这使得JavaScript操作HTML，不是在操作字符串，而是在操作节点，极大地降低了编程难度。

DOM对很多东西做了抽象，提供了丰富的API：取得元素、css样式、事件、运动、元素尺寸位置、节点操作。每个知识体系都非常庞大，千丝万缕。

DOM的结构呈树状，所以也把DOM叫做DOM树，DOM树是由很多DOM节点组成的

2. 认识DOM节点

2.1 DOM树

dom.gif

2.2 DOM 常用节点

元素节点 1

属性节点 2

文本节点 3

注释节点 8

document 文档节点 9

DocumentFragment 文档片段节点 11

2.3 DOM节点属性

nodeName 元素节点的标签名,以大写字母的形式表示,只读不能修改
nodeValue 文本节点和注释节点的内容,可读可写
nodeType 节点的类型(最有用的),帮助我们区分节点,只读
attributes 元素节点的属性集合(只能修改属性值), name 属性名,value 属性值

3. 获取DOM元素

查: 查询DOM节点

document                                获取document文档(这是一个对象)
document.head                       获取head标签
document.body                       获取body标签
document.documentElement 获取html标

document.getElementById()         通过id获取元素(IE7以下不区分大小写,会获取name属性)

element.getElementsByTagName()    通过标签名获取元素

document.getElementsByName()     通过name属性获取

注意,只用部分标签可用,通过name属性获取元素(表单,表单元素,img,iframe);

element.getElementsByClassName()     通过class类名获取

通过class获取元素(ie8及以下ie版本中没有,可以多个class一起写)

element.querySelector()       选到指定选择器下的第一个元素(ie7及以下没有)
element.querySelectorAll()       选到指定选择器的所有元素(ie7及以下没有)

现在ie7以下用的很少了 ,可以放心用,但是这两个方法获取的不是实时的,是静态的,选择的是快照,副本.
<div id='box'></div>
<div></div>
<div></div>

<script>
var div = document.getElementsByTagName("div")
var oBox = document.getElementById('box');
    oBox.remove();
    console.log(div);
</script>
动态获取与静态获取

get系列是动态获取每次使用时会重新获取

query系列是静态获取

3.1 获取元素节点

HTML负责页面的布局、结构。JS要操作HTML标签，第一件事儿就是得到这个元素(标签)。

说白了，就是把HTML标签拿到JS里面来。

JavaScript通过document对象表示文档，它表示整个页面。它有很多属性和方法，包含了绝大多数多页面的特征和操作。学习DOM，说白了就是学习document对象。

//全线浏览器兼容的，得到元素的方法，就这两个：
document.getElementById()               //通过id得到元素
document.getElementsByTagName();    通过标签名得到元素们

3.2 getElementById()

getElementById()方法，通过id获取元素

这个单词实际上是由几个小单词组成的：get得到 Element元素 By通过 Id id属性

var oBox = document.getElementById("box");
console.log(typeof oBox);       //object

需要注意的是，getElementById里面就写id就行了，不要多写#

如果说页面上没有匹配的id的HTML元素，将返回null，

id大小写要严格区分，但是在IE7及以下中，大小写是不区分的。

IE7及较低版本还有一个怪癖，表单元素name特性也会被当做id。

为了避免这个问题，所以页面上的name最好也不要和任何id的名字相同。

<input type="text" name="haha" />

<script type="text/javascript">
    var oInput = document.getElementById("haha");
</script>

3.3 getElementsByTagName

getElementsByTagName就是通过标签名得到元素，得到的是页面上所有该种标签元素，得到的是类数组，数组可以有下标，开始是0，最后一项是.length-1

var ops = document.getElementsByTagName("p");

3.4 连续打点调用get

先获取一个HTML标签，然后选择这个HTML标签中的所有p标签：

var ps = document.getElementById("box2").getElementsByTagName("p");

不要多写一个document,下面的写法是错误的

var ps = document.getElementById("box2").document.getElementsByTagName("p");

连续get可以很疯狂，但是如果是数组，一定要加上下标，才能变成对象：

document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("span")[1].style.color = "red";

4. 节点的操作

4.1 基于节点树的操作(兼容所有浏览器)

parentNode 父节点(最顶端的parentNode为#document)
childNodes 子节点们
firstChild 第一个子节点
lastChild 最后一个子节点
nextsibling 下一个兄弟节点
previousSibling 上一个兄弟节点

4.2 基于元素节点树的操作(除了children,其他都不兼容IE9及以下)

parentElement 父元素节点
children 子元素节点们
firstElementChild 第一个子元素节点
lastElementChild 最后一个子元素节点
nextElementSibling 下一个兄弟元素节点
previousElementChild 上一个兄弟元素节点

封装一个方法获取元素的所有子元素节点组成的数组,不允许用children

function retElementChild(node){
    var arr = [],
        child = node.childNodes,
        len = child.length;
    for(var i = 0; i < len; i++){
        if(child[i].nodeType == 1){
            arr.push(child[i])
        }
    }
    return arr;
}

4.3 增:创建DOM节点

document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
document.createComment() 创建注释节点
document.createDocumentFragment 创建文档片段节点

4.4 插:添加(剪切操作)

parentNode.appendChild(A) 在parentNode的最后面添加节点A
parentNode.insertBefore(A,B) 把节点A添加在节点B前面

4.5 删:删除节点

parentNode.removeChild(A) 删除节点A

child.remove()

4.6 替换(剪切操作)

parentNode.replaceChild(A,B) 用节点A代替节点B

4.7 判断一个元素节点有没有子节点方法

element.hasChildNodes() 如果有则返回true。没有则返回false

5. 节点的一些属性和方法

5.1 元素节点常用的属性

innerHTML 获取元素节点的内容，可读可写
如果内容中有符合html格式的，会被解析成标签

innerText 获取元素节点的内容，可读可写
如果内容中有符合html格式的，不会被解析成标签

innerText在赋值的时候要注意,会将标签覆盖掉

注意: 老版本的火狐不兼容innerText.火狐有自己的属性textContent,但是textContent老版本IE(8及以下)不兼容

5.2 元素节点常用的方法

设置或获取标签属性

element.setAttribute(“class”,“on”) 设置元素节点的class属性
element.getAttribute(“class”) 获取元素节点的class属性
element.removeAttribute(“class”) 删除元素节点的class属性

<style>
    .on{
        color:#fff;
        font-size:20px;
        background-color:orange;
    }
</style>
<div id="box">wuwei</div>
<script>
    var oBox = document.getElementById('box');
    oBox.setAttribute('class','on');
</script>

6. 更改HTML的属性

JS可以更改HTML的任何属性，方法是两种：点语法和 setAttribute()、getAttribute()。

6.1 getAttribute(),setAttribute()

getAttribute(); //获取属性

setAttribute(); //设置属性

oImg.setAttribute("src","images/2.jpg");
等价于
oImg.src = “images/2.jpg”;

6.2 点语法

得到一个元素之后，直接打点调用它的属性名，就能对HTML相应的属性进行更改。可以获取,也可以设置

oImg.src = "images/2.jpg";
oLianjie.href = "http://www.163.com";
oBox.value = "嘻嘻嘻嘻嘻";

class这个属性，要换成className，因为class是JS的保留字。

oDiv.className = "da";

如果想要换一个HTML元素的class属性，那么就要打点调用.className属性。

6.3 点语法与getAttribute(),setAttribute()的区别

第一，所有自定义的属性，都不能通过点语法获取和设置

设置自定义属性

<div id='box'></div>

oBox.wu='name';  
oBox.setAttribute("wu","name"));

此时点操作符不能设置自定义属性

获取自定义属性

<div id='box' wu='haha'></div>

alert(oBox.wu);  //undefined，自定义的属性，不是w3c的属性，都不能用点语法
alert(oBox.getAttribute("wu")); //haha

第二，所有的行内样式，点语法.style得到的是一个样式对象。我们可以通过.style.border继续得到小样式。

但是getAttribute()得到的是字符串

var oBox = document.getElementById("box");

console.log(typeof oBox.style);   //object
console.log(typeof oBox.getAttribute("style"));   //string

第三，getAttribute()不需要避讳，直接

oDiv.getAttribute(“class”); //就行了

点语法的效率远高于getAttribute()、setAttribute()。

所以，如果操作自定义的属性，偶尔用一次setAttribute,getAttribute，除此之外，都用点语法。

6.4 关于H5新增的元素节点的classList属性

classList 属性是一个类数组,其身上有几个常用的方法

add(value) 将给定的参数字符串添加到元素的class属性中,如果存在就不添加了

remove(value) 将给定的参数字符串从class属性中删除

contains(value) 返回布尔值,表示class属性中是否包含参数字符串

toggle(value) 检测class属性中是否有参数字符串有则删除返回false,没有则添加,返回true

这个属性IE9及其一下不能用

6.5 H5新增了自定义属性,但是需要以data-开头

元素节点有一个dataset属性用来获取和设置自定义属性

<div id="box" data-myName="wuwei" data-appId="123">我是div</div>

var div = document.getElementById('box');

// 获取自定义属性值
console.log(div.dataset);   // {myname: "wuwe", appid: "12"}
div.dataset.myName;        // wuwei
div.dataset.appId;         // 123

// 修改自定义属性值
div.dataset.myName = 'haha';   //haha
div.dataset.appId = '234';     // 234

IE10及以下不兼容