文档对象模型（Document Object Model--DOM）

Posted 2020-10-03 Demetris

文档对象模型（Document Object Model--DOM）

1.DOM

a) 允许脚本和程序动态读取和更新文档内容、结构和样式的语言和平台

b) 使用DOM操作html页面可以不用每次从服务器传输整个页面

c) DOM是针对HTML和XML的而应用程序接口

2.DOM结构

　　a) DOM的树形结构

i.文档中的所有元素都是树的节点

ii.每个节点都是Node对象

iii.每种Node对象都定义了特定的属性和方法

　　b) DOM内部对象常用属性和方法

i.属性

。attributes:如果是Entity、Notation则返回对应的Node；如果是Element则返回一个可以通过名字访问的Node列表；其他类型返回null

。parentNode：返回当前节点的Node型的父节点；没有则返回null

。childNodes：返回当前节点的子节点组成的NOde数组列表；没有子节点则返回空数组

。firstChild：返回当前节点的Node类型的第一个子节点；没有则返回null

。lastChild：返回当前节点的Node类型的最后一个子节点；没有则返回null

。nextSibling：返回当前节点的Node型的下一个兄弟节点；没有则返回null

。previousSibling：返回当前节点的Node型的前一个兄弟节点；没有则返回null

。nodeName：返回当前节点的名字

。nodeType：返回当前节点的类型

ii.方法

。hasChildNodes()：判断当前节点是否有子节点

。appendChild()：为当前节点添加一个子节点

。removeChild()：将指定节点的子节点删除并返回

。replaceChild():返回被代替的子节点并用指定的子节点代替；如果指定的子节点为null或不存在，则直接将被替的子节点删除

。insertBefore()：在当前节点的指定子节点之前添加一个子节点；如果指定的子节点不存在或为null，直接在指定节点的最后添加一个子节点

　　c) Element对象属性

i.属性

。id:返回当前元素的id

。innerHTML：返回当前元素的HTML标记内容

。innerText以文本形式返回当前元素的内容

。style：返回当前元素的样式

。tagName：返回当前元素的标记名

 

ii.方法

。click():在当前元素上模拟鼠标单击事件

。blur()：将键盘焦点从当前元素移开

。focus()：使当前元素获得焦点

。hasAttribute()：如果指定的属性存在则返回true否则false

。setAttribute():为元素添加指定的属性

。getAttribute()：返回当前节点的指定属性的Attr节点

。removeAttribute()：删除指定属性

。getElementByTagName()：返回指定标记名的元素数组

d) Document常用对象方法

i.Document节点是所有节点的根节点

ii.方法

。creatElement（）：根据指定元素名创建元素

。createAttribute（）：根据指定属性名创建一个属性节点，返回新的Attr对象

。createTextNode（）：创建一个文本元素

。getElementById（）:根据ID获取元素

。getElementByName（）：返回指定名称的元素列表

3.使用DOM处理页面元素

　　a) 问题：无法用ID获取元素

4.使用DOM处理表格