要点：

1. DOM介绍
2. 查找元素
3. DOM节点
4. 节点操作

什么是 DOM？

DOM即文档对象，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创建的DHTML（动态HTML），但是现在已经成为一种表现和操作页面标记的真正跨平台、语言中立的方式。

DOM中的三个字母，分别是Document（文档），可以理解为整个web加载的网页文档。Object（对象）可以理解为类似window对象之类的东西，可以调用属性和方法。Model（模型），可以理解为网页文档的树形接口。

DOM有三个等级，分别是DOM1，DOM2，DOM3，并且DOM1在1998年10月成为W3C标准。（IE中的DOM对象都是COM对象实现的，所以IE的DOM与其他浏览器有一定差异）

一、节点

加载HTML页面时候，Web浏览器生成一个树形结构，用来表示页面内部结构。DOM将这种树形结构理解为由节点组成。

HTML DOM Node Tree

<div id="box">测试div</div>

节点分为三类：

1. 元素节点： 标签 <div></div>
2. 文本节点： 标签内文本 测试div
3. 属性节点： 标签内属性 id="box"

二、查找元素

元素节点方法

window.onload = function () {
    let box = document.getElementById('box');
    console.log(box);
};
// <div id="box">测试div</div>

console.log(box.tagName);       // DIV 获取元素节点标签名
console.log(box.innerHTML);     // 测试div 获取元素节点内文本(包含标签) 也可以赋值

HTML属性

<div id="box" title="标题" class="类名" style="color: red;">测试div</div>

window.onload = function () {
    let box = document.getElementById('box');
    console.log(box.id);            // box
    console.log(box.title);         // 标题
    console.log(box.style);
    // demo.js:5 CSSStyleDeclaration {0: "color", alignContent: ...}
    console.log(box.style.color);   // red
    console.log(box.className);     // 类名
};

getElementByTagName()

参数传递一个标签名，返回数组

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

window.onload = function () {
    const arr = document.getElementsByTagName('li');
    console.log(arr);
    // HTMLCollection(5) [li, li, li, li, li]
    console.log(arr[0]);
    // <li>1</li>
    console.log(arr.item(0));
    // <li>1</li>
    console.log(arr[0].innerHTML = 'nihao');
    // 更改第一项
};

返回body节点

// 获取body
    const body = document.getElementsByTagName('body')[0];
    // console.log(body); // 0: body length: 1
    console.log(body); // 0: body length: 1

星号的含义

    const all = document.getElementsByTagName('*');
    console.log(all); // 0: body length: 1
    // HTMLCollection(14) [html, head, meta, title, meta, meta, script, body, ul, li, li, li, li, li, viewport: meta]

getElementByName()

获取相同名称的（name）的元素，返回数组, 一般用于表单 。IE不支持除表单外的元素上获取name

 <div name="box"></div>
 <div name="box"></div> 
 <div name="test"></div>

window.onload = function () {
    const box = document.getElementsByName('box');
    console.log(box); // NodeList(2) [div, div]
};

getAttribute()

默认不可以获得自定义属性，但getAttribute可以返回自定义以及其他属性

const box = document.getElementById('box');
console.log(box.zzz);  // undefined   ie支持
console.log(box.getAttribute('zzz')); // 自定义  ie返回对象

常用方法

三、DOM节点

window.onload = function () {
    var box = document.getElementById('box');
    console.log(box.nodeName);
    // 与tagName等价   DIV
    console.log(box.nodeType);
    // 获取元素类型节点值  1  元素节点为1，属性节点2，文本节点3
    console.log(box.nodeValue);
    // 元素节点本身没有内容所以是null null
    // node本身把节点指针放在元素<div></div>上，也就是本身没有value的
    // 如果要输出<div>value</div>要用InnerHTML
    // node只能获取当前节点的东西
    // 文本节点不等于文本内容
};

node节点属性

层次节点属性

    var box = document.getElementById('box');
    console.log(box.innerHTML);
    // demo.js:3 测试<em>倾斜</em>
    console.log(box.childNodes);
    // NodeList(2) [text, em]0: text1: emlength: 2__proto__: NodeList
    // 第一个节点是 测试  为文本节点
    // 第二个节点是<em>倾斜</em> 这个几点称为元素节点
    console.log(box.childNodes[0].nodeType);
    //  3 文本节点
    console.log(box.childNodes[0].nodeValue); 
    // 测试  获取文本节点的文本内容

node无法遍历出属性节点，只能遍历元素节点和文本节点。

ar box = document.getElementById('box');
    for (let i = 0; i < box.childNodes.length; i++) {
        if (box.childNodes[i].nodeType === 1) {
            console.log('元素节点 ' + box.childNodes[i].nodeType);
        }
        else if (box.childNodes[i].nodeType === 3) {
            console.log('文本节点 ' + box.childNodes[i].nodeValue);
        }
    }

//  1
// 测试

nodeValue和innerHTML的区别

nodeValue必须用在文本节点上，不可以添加html元素，innerHTML只需要用在当前元素上，并且可以添加html元素。

attributes获取属性

<div id="box" class="a" bbb='bbb'>11</div>

    var box = document.getElementById('box');
    console.log(box.attributes);
    // 返回NamedNodeMap对象
    // {0: id, 1: class, 2: bbb, id: id, class: class, bbb: bbb, length: 3}
    console.log(box.attributes[0].nodeType);
    // 2 属性节点
    console.log(box.attributes[0].nodeValue);
    // box
    console.log(box.attributes[0].nodeName);
    // id
    console.log(box.attributes['id']);
    // id = 'box'

四、节点操作

节点操作方法

1. write()

document.write('文字')  // 一般用于测试

2.createElement()

var p = document.createElement('p');
// 只创建了节点，但没有上到节点上，驻留在内存中

3.appendChild()

box.appendChild(p); // 追加子元素p到box

4.createTextNode()

var text = document.createTextNode('测试text');
p.appendChild(text);
// <p>text</p>

5.insertBefore()

box.parentNode.insertBefore(p, box);
// 在box上方添加p元素 必须在父节点操作

6.repalceChild()

box.parentNode.replaceChild(p, box);
// p元素替换了div元素

7.cloneNode()

8.removeChild()