JS-DOM

 

DOM（Document Object Model）

• DOM介绍
• DOM树
• 节点类型
• 获取DOM节点
• 获取节点
• 获取元素节点
• 获取属性节点
• 节点的经常使用属性
• 节点间关系
• 父节点
• 子节点
• 第一个子节点
• 最后一个子节点
• 全部子节点
• 兄弟节点
• 下一个兄弟节点
• 上一个兄弟节点
• 操做DOM节点
• 建立节点
• 插入(移动)节点
• appendChild
• insertBefore
• 移动节点
• 删除节点
• 复制节点
• 操做节点属性
• 获取属性
• 直接操做
• 做为节点操做
• 删除属性
• 设置属性
• 直接操做和做为节点操做注意事项
• innerHTML和innerText的区别
• document经常使用节点获取

 

DOM介绍

DOM树

HTML加载完毕后会生成一个DOM树

• html、head、body、a等节点称为元素节点
• href等节点称为属性节点
• innerHTML等节点称为文本节点

---

节点类型

<div>
	<!-- 注释 -->text1
	text2
	<p>段落</p>
</div>

假设父元素是div标记，则：

• 第一行<div>后的换行和制表符被划分为一个文本节点(#text)
• 第二行的<!-- 注释 -->是一个注释节点(#comment)
• 第二行<!-- 注释 -->后的text1和换行和制表符和text2和换行被划分为一个文本节点
• 第三行的<p>段落</p>是一个元素节点
• 第三行的<p>段落</p>后的换行是一个文本节点

因此div一共有5个子节点

获取DOM节点

获取节点

获取元素节点

//单个
document.getElementById();
//数组
document.getElementsByClassName();
document.getElementsByTagName();

获取属性节点

元素节点.getAttributeNode(attributeName);

节点的经常使用属性

例：

<div id="d">this is a div<!-- 注释 --></div>

var d=document.getElementById("d");
console.log(d.firstChild);

输出：

nodeName: "#text"		//节点名（文本节点）
nodeType: 3			//节点类型（1:元素 2:属性 3:文本）
nodeValue: "this is a div"	//节点value
parentNode: HTMLDivElement	//父节点
parentElement: HTMLDivElement	//父元素节点
previousSibling: null		//上一个兄弟节点
nextSibling: Comment		//下一个兄弟节点（注释）
length: 13			//长度
...

节点间关系

父节点

节点.parentNode

子节点

第一个子节点

IE六、七、8仅支持firstChild
fireFox、Chrome、IE9+支持firstChild和firstElementChild

IE六、七、8中的firstChild指第一个子标签节点
fireFox、Chrome、IE9+中的firstChild指第一个子节点(包括换行、标签、空文档)
fireFox、Chrome、IE9+中的firstElementChild指第一个子标签节点

因此考虑兼容性：

//IE 六、七、8
节点.firstChild

//fireFox、Chrome、IE9+
节点.firstElementChild

两个属性能够这样合并：

var 第一个子节 = 点节点.firstElementChild || 节点.firstChild
//优先使用firstElementChild，如果IE 六、七、8，由于不支持因此会用后者；而其余浏览器则会使用前者

最后一个子节点

同上具备兼容性问题，语句为：

节点.lastChild
节点.lastElementChild

全部子节点

标准属性：childNodes

IE六、七、8中的childNodes指全部子元素节点
fireFox、Chrome、IE9+中的childNodes指全部子节点(包括换行、标签、空文档)

非标准属性（虽不是标准属性，但几乎全部浏览器都支持）：children

fireFox、Chrome、IE9+中的children指全部子元素节点
IE六、七、8中的children还包含了注释节点，要注意注释不要写操做节点里面

使用时建议用children（注意不要写注释节点）来达到多浏览器兼容

兄弟节点

下一个兄弟节点

同获取第一个子节点同样具备兼容性问题，语句为：

节点.nextSibling
节点.nextElementSibling

上一个兄弟节点

同获取第一个子节点同样具备兼容性问题，语句为：

节点.previousSibling
节点.previousElementSibling

操做DOM节点

建立节点

var a=document.createElement("div");
var b=document.createElement("abc");
console.log(a);		//<div></div>
console.log(b);		//<abc></abc>
console.log(typeof a);	//object
console.log(typeof b);	//object

插入(移动)节点

appendChild

在指定节点内的最后插入

节点.appendChild(object)

insertBefore

在指定节点内的参考节点前插入，若找不到参考节点则按appendChild插到最后

节点.insertBefore(object,参考节点)

移动节点

<div id="d1">
   <p>1</p>
</div>
<div id="d2">
   <p>2</p>
</div>

var d1=document.getElementById("d1");
var p2=document.getElementById("d2").firstElementChild;
d1.appendChild(p2);	//p2移动到d1
d1.insertBefore(p2,d1.firstElementChild);	//p2移到p1前面

删除节点

格式：

父节点.removeChild(object)

若要删除本身，能够：

node.parentNode.removeChild(node)

复制节点

格式：

节点.cloneNode(Boolean)

参数为false(默认为false)时，表示仅复制节点自己
参数为true时，表示复制还全部子节点

例：

<div>
	111
	<a>baidu</a>
</div>

为true时复制所有
为false时仅复制：<div></div>，任何子节点都不复制（不只只有元素节点）

操做节点属性

获取属性

例：

<img src="1.jpg" id="i1" class="imgs" alt="img1" />
var i1=document.getElementById("i1");

直接操做

i1.src		或   i1["src"]		--> http://localhost/test/1.jpg
i1.className	或   i1["className"]	--> imgs
i1.alt		或   i1["alt"]		--> img1
i1.width	或   i1["width"]		--> 63

直接操做获取的src是绝对路径，由于直接读取的是系统属性
class要写为className，由于系统中存储的是className属性
获取width时虽然标签中没有声明，但由于是读取系统属性因此仍能够读出来

做为节点操做

i1.getAttribute("src")		--> 1.jpg
i1.getAttribute("class")	--> imgs
i1.getAttribute("alt")		--> img1
i1.getAttribute("width")	--> null

使用getAttribute至关于直接读取html文档中的属性节点，不是读取系统属性
因此获取src和class时不用考虑系统属性名和系统中属性值是否与html文档相同的问题
读取width时由于标签中没有声明，因此找不到width，此时应该用直接操做

删除属性

格式：

node.removeAttribute(attribute)

设置属性

格式：

node.setAttribute(attribute,value)

直接操做和做为节点操做注意事项

直接操做操做的是系统中的属性，做为节点操做操做的是标签上的属性节点
例子：

i1.a="abc";
console.log(i1.a);	//abc
console.log(i1.getAttribute("a"));	//null

i1.setAttribute("b","def");
console.log(i1.b);	//undefined
console.log(i1.getAttribute("b"));	//def

因此二者不可混用

innerHTML和innerText的区别

<div id="d">
	aaa
	<div>
		div2
	</div>
</div>

上面的HTML片断中，运行如下打码：

console.log(d1.innerText);	// aaa div2
console.log(d1.innerHTML);	//2-5行所有输出

d1.innerText="<p>text</p>";	//此时的  <  >  被做为字符串被转换为  &lt;  &gt;
console.log(d1.innerHTML);	//&lt;p&gt;text&lt;/p&gt;
//！在设置 文本节点 时同时覆盖了全部 其余节点

d1.innerHTML="<p>text</p>";	//p标签做为正常的元素节点，不会被转换

document经常使用节点获取

属性
document.title	获取head里的title
document.head	获取head标签
document.body	获取body标签
document.documentElement	获取html标签(注意不是.html)