DOM API

----节点对象选择器

document.getElementById('id') 获取ID名称为 id的标签 返回对应的节点对象(单个) 如果文档内有多个 ID名称为 id的标签 只获取第一个

document.getElementsByTagName('p') 获取文档内的所有 p 标签 返回一个 DOM集合(NodeList) 类数组对象 哪怕没有找到只有一个也返回类数组集合

document.getElementsByClassName('des') 获取文档内的所有类名为 des 的标签 返回一个 DOM集合(NodeList) 类数组对象 哪怕没有找到只有一个也返回类数组集合

document.querySelector('#id') querySelector是H5 新增的DOM API 参数使用合法的css选择器即可  返回复合条件的第一个元素 (唯一)

document.querySelectorAll('div') querySelectorAll是H5 新增的DOM API 参数使用合法的css选择器即可  返回复合条件的节点集合 类数组对象(非唯一)

----节点对象属性

element.title  设置或返回元素的title属性
element.textContent  设置或返回一个节点和它的文本内容
element.innerText  设置或返回一个节点和它的文本内容
element.tagName  作为一个字符串返回某个元素的标记名（大写）
element.className  获取标签的class属性值

nodelist.length  返回节点列表的节点数目。
nodelist.item(idx)  返回某个元素基于文档树的索引 同 nodelist[idx]

----获取标签属性

可通过.点操作符直接获取属性，或者通过getAttribute()获取

----获取样式

获取行内样式：

获取实际样式：

 

兼容：

 

 

----获取节点内容

oHeader.innerHTML 获取标签内的实际内容 包括标签

oHeader.innerText 获取标签内的文本内容 谷歌火狐支持，ie8支持

oHeader.textContent 获取标签内的文本内容 谷歌火狐支持，ie8不支持

兼容：

function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
        return element.innerText;
    }else{
        return element.textContent;
    }
}

----获取节点相关节点

oHeader.children 获取子元素 只有标签

oHeader.childNodes 获取子节点 包含文本节点与标签节点

oHeader.firstChild 获取第一个子节点 包含文本

oHeader.firstElementChild 获取第一个子标签节点

oHeader.lastChild 获取最后一个子节点 包含文本

oHeader.lastElementChild 获取最后一个子标签节点

var aLi = document.querySelectorAll('li')

aLi[0].parentElement 获取元素的父元素

aLi[0].parentNode 获取元素的父节点

aLi[1].nextElementSibling 获取元素的下一个兄弟标签节点

aLi[1].nextSibling 获取下一个兄弟节点

aLi[2].previousElementSibling 获取上一个兄弟标签节点

aLi[2].previousSibling 获取上一个兄弟节点

 

----创建和添加、删除节点标签

var cP = document.createElement('p') 创建标签节点

document.body.appendChild(cP)  添加cP到body中进行渲染

document.body.append(cP) append 是H5 WEB API 新增方法

document.body.innerHTML = '<p>添加的p标签</p>'  通过文本标签方式添加节点

document.write('<p>123</p>') HTML输出流 直接覆盖body中的内容

ELE.insertBefore(B,A)  在父节点ELE里面的节点A前面添加 新的节点B

element.removeChild(element.children[1])  element删除了element内的下标为1的子元素
element.remove( )  H5 DOM API 自己删自己

----节点替换拷贝

--拷贝

var oWrap = document.getElementById('wrap'); 

//cloneNode方法会对调用它的节点对象进行复制 传参true代表包括该节点的后代节点 不传参数表示只复制该节点本身
var cloneWrap = oWrap.cloneNode(true);
document.body.appendChild(cloneWrap);

--替换

var oWrap = document.querySelector('#wrap');
var oDes = oWrap.querySelector('#wrap .des');
var newDes = document.createElement('p');
newDes.innerHTML = '我会替换掉你';
oWrap.replaceChild(newDes,oDes);  用newDes替换oWrap内部的oDes

----节点检查

document.hasFocus()  返回布尔值，检测文档或元素是否获取焦点
element.hasChildNodes()  返回布尔值,检测节点对象是否包含任何子节点
element.isEqualNode(element2)  返回布尔值,判断element与element2是否是同一个节点
element.hasAttributes()  返回布尔值,判断当前节点对象是否包含属性
element.hasAttribute(property)  返回布尔值, 判断该节点是否拥有指定的 property 属性