js 基础 -- DOM 操作

DOM 文档对象模型，节点数

HTML 标签无兄弟，父元素为根节点
节点分类：元素节点、文本节点、属性节点

获取节点

通过 ID 属性：
document.getElementById(‘box’)

通过 class 属性：
document.getElementByClassName(‘abc’)

通过 name 属性：
document.getElementsByName(‘abc’)

通过元素标签：
document.getElementsByTagtName(‘div’)item(0)

在限定元素下获取：
var p = box.getElementsByTagName(‘p’);

获取子节点：
box.childNodes; （包含文本节点）
box.children; （只有元素节点）

获取父元素节点
box.parentElement;
box.parentNode;（效果一样）

获取兄弟元素节点：
前一个兄弟：
box.previousElementSibling;（不含文本节点）
box.previousSibling;（含文本节点）
后一个兄弟：
box.nextElementSibling;（不含）
box.nextSibling;（含）

获取第一个子元素：
box.firstElementChild;（不含）
box.firstChild;（含）

获取最后一个子元素：
box.lastElementChild;（不含）
box.lastChild;（含）

节点操作

创建节点
var box = document.createElement(‘div’)
box.id = ‘box’;
box.style = ‘width:300px,height:200px;’

追加节点
box.appendChild(a);
向 box 节点之后添加 a 节点
box.inserBefore(a,p);
向 p 节点之前添加 a 节点

替换节点
box.replaceChild(a,p);
a 新节点 / p 旧节点
用 a 节点替换 p 节点

删除节点
box.removeChild(p); 删除子节点
box.remove( ); 删除自己

复制节点
var box2 = box.cloneNode(true / false);
true：同时复制其内容
false：（默认）只复制元素本身

属性操作

属性获取
getAttribute(‘属性名’)；

属性设置
setAttribute(‘属性名’,’属性值’)；

属性删除
removeAttribute(‘属性名’)

innerText：文本（你好）
innerHTML：元素及文本（<p>你好</p>）
outerHTML：本身，子元素及文本（<div><p>你好</p></div>）