HTML DOM 学习总结

DOM：核心DOM、XML DOM、HTML DOM

这里是对于HTML DOM学习的总结

---------------------------------------------------------------

1、DOM介绍

DOM：Document Object Model，文档对象模型

如上图，元素、文本、属性三种节点作为叶子节点构成一颗树

通过可编程的对象模型，JS获得了足够的能力来创建动态的HTML，能改变页面中的所有HTML元素

各个节点之间存在着逻辑关系：parent、sibling、child

各个元素之间有以上逻辑关系，然后文本节点是元素节点的子节点

属性节点貌似不属于元素节点的子节点（可以通过查看元素的子节点个数来验证---待考证后更新），但是可以通过对象来更改属性值

 

2、DOM 方法和属性

常用HTML DOM方法
getElementById()	getElementsByTagName()
getElementsByClassName()   在 IE 5,6,7,8 中无效	appendChild()
replaceChild	removeChild()
insertBefore()	createElement()
createTextNode()	createAttribute()
getAttribute()	setAttribute()
常用的HTML DOM属性
innerHTML	parentNode
childNodes	attributes
nodeName	nodeValue
nodeType	document.documentElement
document.body

PS：

nodeName：元素-标签名　　属性-属性名　　文本-#text　　文档-#document（只读）
nodeValue：元素-undefined/null　　文本-文本　　属性-属性值

nodeType：元素-1　　属性-2　　文本-3　　注释-8　　文档-9

 

3、一些能做的事

 

part.1

通过document.write()来改变输出流

通过innerHTML来改变HTML元素内容 或者 childNodes+nodeValue

通过attribute来改变HTML属性

通过style.property来改变样式

//以上前提是已经通过DOM获取到元素对象

 

part.2

<button onclick="displayDate()">xxxx</button>

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

document.getElementById("myBtn").onclick=function(){displayDate()}

　 onload/onunload
    onchange
    onmouseover/onmouseout
    onmousedown/onmouseup/onclick

 

part.3

如需向 HTML DOM 添加新元素，首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

<div id="1st">
<p id="2nd">xxx</p>   
<p id="3rd">xxx</p>
</div>

 例如：在文档结尾添加一个P元素

首先要创建元素节点，再创建一个文本节点添加到刚创建的元素节点下，接着将元素节点添加到父元素div下作为一个新的子节点

上一个例子中用appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。如果不希望如此，可以使用 insertBefore() 方法，只需要找到兄弟节点即可。

如需删除 HTML 元素，必须清楚该元素的父元素，或者用下列方式
var child=document.getElementById("p1") ; child.parentNode.removeChild(child);

 

part.4

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。length 属性定义节点列表中节点的数量。
var x=document.getElementsByTagName("p");
y=x[1];

 

个人总结：通过id、className或者TagName来获取元素后，对元素的文本、属性等进行操作。DOM在这里扮演着类似中间人或者说是桥梁把，连接了JavaScript和HTML，让JS能够更好的对HTML进行操作（大体上是增删改查，外加用户交互）相信随着深入学习会有不同体会。

以上

2016-01-09 19:28:02