DOM编程

DOM节点介绍

Node VS Element ?

Node的类型有多种，其中包含节点(Element)，文本，注释。

MDN NodeType

DOM对象的增删改查

选择DOM对象(查询，选定DOM对象)

document.getElementById()         // 返回唯一DOM节点

document.getElementsByTagName()   // 返回一组DOM节点
document.getElementsByClassName() // 返回一组DOM节点

document.querySelector()          // 返回一个DOM节点
document.querySelectorAll()       // 返回一组DOM节点

// 返回ID为'first-div'的节点：
var div1 = document.getElementById('first-div');

// 先定位ID为'main-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('main-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

// 获取页面上第一个类为hide的节点
var el = document.querySelector('.hide');

// 获取页面上ID为main-table的节点
var el = document.querySelector('#main-table');

// 获取带user-panel, main类的div标签下,含有name属性为'login'的input节点
var el = document.querySelector("div.user-panel.main input[name='login']");

特定元素获取

document.documentElement // html
document.head            // head
document.body            // body
document.all             // all 所有元素, 另, falsy值 document.all?true:false ==> false

节点相对对象选取

// 父节点
node.parentNode
node.parentElement

// 父节点的父节点（爷( •̀ ω •́ )y）
node.parentNode.parentNode

// 兄弟姐妹(们)
node.parentNode.childNodes
node.parentNode.children

node.previousSibling // 上一个兄弟姐妹(们)
node.nextSibling     // 下一个兄弟姐妹(们)

// 子节点(们)
node.childNodes
node.children

node.firstChild // 老大
node.lastChild  // 老幺

/* 遍历指定node及其子元素 */
travel = (node, fn) => {
    fn(node)
    if(node.children){
        for(let i = 0; i < node.children.length; i++){
            travel(node.children[i], fn)
        }
    }
}
travel(div1, (node) => console.log(node))

更新DOM（内容增加，节点修改）

let p = document.getElementById('p-id');

p.innerHTML = 'ABC';
p.innerHTML = 'ABC <span style="color:red"></span>XYZ';

p.innerText = 'Hello DOM';
p.innerText = '<script>alert('Hi!')</script>';
p.textContent = '';
p.textContent = '';

p.style.color = '#01234';
p.style.fontSize = '1.25em';
p.style.paddingTop = '5px';

let d = document.createElement('style');

d.setAttribute('type', 'text/css');

d.innerHTML = 'p {color: red}';

document.getElementsByTagName('head')[0].appendChild(d);

let list = doculment.getElementById('list');
let ref = document.getElementById('python');
let haskell = document.createElement('p');

haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

var i, c, 
    list = doculment.getElementById('list');

for(i = 0; i< list.children.length;i++){
    c = list.children[i];
}

节点创建

document.createElement('div')
document.createElement('style')
document.createElement('script')

document.createTextNode('Hello')

div_1.appendChild(TEXT_NODE)
div_1.innerText = 'Hello World'

注意

appendChild(NODE)// 改变NODE所在位置，页面不会新增NODE

删除DOM

旧方法：

1. 获取节点本身, 获取父节点
2. 调用父节点removeChild删除节点本身
   新方法：
3. 获取节点本身
4. 节点本身调用remove()删除自身

// 旧方法

const parent = self.parentElement;
let self = document.querySelector('#target');

let removed = parent.removeChild(self);

removed === self; // true

// 新方法
let self = document.querySelector('#target');
let removed = self.remove()
removed === self; // true