DOM操作

DOM(Document Object Model)：文档对象模型

常说的JS(浏览器执行的JS)包含两个部分：
JS基础知识(ECMA262标准)
JS-Web-API(W3C标准)

接下来就举一个例子说说JS-Web-API(W3C标准)，先展示HTML结构：

<div id="div1" class="container">
    <p id="p1">1-1</p>
    <p id="p2">1-2</p>
</div>
<div id="div2" class="container" data-name="div-data-name">
    <p id="p3">2-1</p>
    <p id="p4">2-2</p>
</div>

DOM节点操作

获取DOM节点

var div1 = document.getElementById('div1');                         // 元素
var containerList = document.getElementsByClassName('container');   // HTMLCollection：元素的集合
var divList = document.getElementsByTagName('div');                 // HTMLCollection：元素集合

// querySelector：第一个匹配到的元素
var qdiv1 = document.querySelector('#div1');            // 元素
var qcontainer = document.querySelector('.container');  // 元素
var qdiv = document.querySelector('div');               // 元素

// querySelector：所有匹配到的元素
var qdivAll = document.querySelectorAll('div');         // NodeList：节点的集合

// 扩展：节点集合，不仅包括元素集合，还包括文本节点

prototype

prototype是W3C标准规定的，DOM对象的默认属性。

// prototype
var div2 = document.getElementById('div2');
console.log(div2.className);    // container
div2.className = 'abc';
console.log(div2.className);    // abc

attribute

attribute是HTML文档中定义的属性，比如#div2标签的data-name属性。
DOM对象默认是没有这个属性的，所以通过div2.data-name的方式无法取得。

// attribute
var div2 = document.getElementById('div2');

// 获取属性
console.log(div2.getAttribute('data-name'));    // div-data-name

// 设置属性
div2.setAttribute('data-name','xyz');
console.log(div2.getAttribute('data-name'));    // xyz

console.log(div2.data-name);                    // 无效值

// 删除属性
div2.removeAttribute("data-name")

DOM结构操作

新增节点：document.createElement()

var p = document.createElement('p');
p.innerHTML = '1-3';
var div1 = document.getElementById('div1');
div1.appendChild(p);
// 输出结果
// 1-1
// 1-2
// 1-3
// 2-1
// 2-2

移动节点：elem.appendChild()

var p4 = document.getElementById('p4');
var div1 = document.getElementById('div1');
div1.appendChild(p4);
// 输出结果
// 1-1
// 1-2
// 2-2
// 2-1

获取父元素：elem.parentElement

var p4 = document.getElementById('p4');
var div1 = document.getElementById('div1');
console.log(p4.parentElement);      // div2
console.log(div1.parentElement);    // body

获取子元素：elem.childNodes

注意1：div1DOM节点中，P标签之间/P标签与DOM节点之间的空白，会被认为是text内容，所以会导致取得的子元素中有三个text。解决办法是可以通过nodeType过滤。
注意2：div1.childNodes并不是一个真正的数组，它只有forEach方法。

var div1 = document.getElementById('div1');
console.log(div1.childNodes);
// text
// p#p1
// text
// p#p2
// text
console.log(div1.childNodes[0].nodeType);   // 3
console.log(div1.childNodes[1].nodeType);   // 1
console.log(div1.childNodes[0].nodeName);   // #text
console.log(div1.childNodes[1].nodeName);   // P

// 通过nodeType过滤
var div1Node = [];
div1.childNodes.forEach(item => {
    if(item.nodeType === 1){
        div1Node.push(item);
    }
});
console.log(div1Node);

删除节点：elem.removeChild()

var div1 = document.getElementById('div1');
div1.removeChild(div1.childNodes[1]);

最后编辑于：2018.12.20 23:11:45