php中，DOM是PHP语言与xml/html标签之间沟通的桥梁，在js中也同样，是js与xml/html之间沟通的一个桥梁。所以学习DOM就是通过js来对HTML标签内容做增、删、改、查等操作。
元素节点获取
//通过ID获取具体节点
var it = document.getElementById('username');
//通过标签访问具体节点，获取的形式为数组或集合形式
var hh = document.getElementsByTagName('h2');
//通过name标签访问具体节点，获取的形式为数组或集合形式
var it = document.getElementsByName('username');
文本节点获取
<div>today is very<span>good</span></div>
若想获取这个文本节点，需要借助元素节点先获取div，然后在获得其内部文本节点
var it3 = document.getElementsByTagName('div')[0];
//获得div内部第一个子节点对象并获得文本信息
console.log(it3.lastChild.wholeText);
属性节点获取
节点.attributes：把该节点所有属性以数组形式返回
节点.nodeTyoe：返回节点类型，1.元素节点 2.属性节点 3.文本节点 4.document节点
属性值操作
//获取属性值
节点.getAttribute(属性名称)；
//设置属性值
节点.setAttrubute(属性名称，值)；
兄弟节点获取
firstChild，lastChild：子节点获得第一个/最后一个节点
nextSibling：获得下一个兄弟节点
previousSibling：获得上一个兄弟节点
childNodes：获取全部子节点，主流浏览器会把空白节点算上，而老版本IE不会
父节点获取
parentNode：获取当前元素父节点
节点创建和追加
父节点.appendChild(子节点);添加节点
父节点.insertBefore(要插入的节点，插入位置的节点)
父节点.replaceChild(要替换的节点，被替换的节点)
通过js动态创建节点如下：
<ul><li mean="热情">red</li></ul>
具体js代码：
//创建ui标签
var ull = document.createElement('ul');
//创建li标签
var lii = document.createElement('li');
//创建文本
var txt = document.createTextNode('red');
//为lii设置mean属性
lii.setAttribute('mean','热情');
//给lii节点添加文本
lii.appendChild(txt);
//给ull节点添加lii节点
ull.appendChild(lii);
//给body节点添加ull
document.body.appendChild(ull);
节点复制操作
被复制节点.cloneNode(false/true)：false浅复制（本身节点） true深复制（本身和内部子节点都复制）
节点删除
节点.removeChild(子节点)
子节点.parentNode.removeChild(子节点)
DOM对CSS样式操作
- 获取CSS样式
节点.style.css.样式名称 - 设置CSS样式（有就修改，没有则添加）
元素节点.style.css.样式名称 = 值
注意：
DOM操作CSS样式只能操作"行内样式"（CSS样式分为行内、内部、外部）
操作的属性如果带横杠，需要把横杠去掉，并把紧接着的字母大写。
网友评论