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

子节点

注意：指的是下一级子节点，不是所有级

第一个子节点

IE6、7、8仅支持firstChild
fireFox、Chrome、IE9+支持firstChild和firstElementChild

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

所以考虑兼容性：

//IE 6、7、8
节点.firstChild

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

两个属性可以这样合并：

var 第一个子节 = 点节点.firstElementChild || 节点.firstChild
//优先使用firstElementChild，若是IE 6、7、8，因为不支持所以会用后者；而其他浏览器则会使用前者

最后一个子节点

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

节点.lastChild
节点.lastElementChild

所有子节点

标准属性：childNodes

IE6、7、8中的childNodes指所有子元素节点
fireFox、Chrome、IE9+中的childNodes指所有子节点(包括换行、标签、空文档)

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

fireFox、Chrome、IE9+中的children指所有子元素节点
IE6、7、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)