首页 > 代码库 > DOM模型

DOM模型

DOM模型其实将一个HTML和一颗树之间进行映射。

DOM中有以下节点:

元素节点:<html>、<body>、<meta>和<h1>等都是元素节点。

文本节点:文本节点是向用户展示的类容,在XHTML中文本节点总是被包含在元素节点的内部,但是元素节点并不一定包含文本节点,比如说<ul>。

属性节点:属性总是被放在标签中,因此属性节点总是被包含在元素节点中。

使用DOM

知道了DOM模型的框架和节点之后,最重要的就是利用这些节点来处理(操作)HTML网页。

对于每一个DOM节点node,都有一系列的属性、方法可以使用(有哪些方法和属性呢?)。

(1)访问节点:通过document.getElementById("xXx");或者document.getElementsByTagName("xxx");来获取我们要操作的node。

(2)检测节点类型:document.nodeType可获取节点类型,nodeType的值有三种:

        (2.1)元素节点的nodeType是1

        (2.2)元素节点的nodeType是2

        (2.3)元素节点的nodeType是3

(3)利用父子节点查找节点:例如可以利用node的hasChildNodes()方法和childNodes属性获取该节点所包含的所有子节点。

(4)设置节点属性:getAttribute()方法和setAttribute()方法。

(5)创建和添加节点

(6)删除节点

(7)替换节点

(8)在特定节点前插入节点

(9)在特定节点之后插入节点

 

使用非标准的DOM innerHTML属性

innerHTML这个属性表示某个标记之间的所有内容,包括代码本身,该属性可读可写。

 

总结:掌握了DOM之后,就可以轻松随意的操纵HTML中的元素了,啊~哈~哈~

DOM模型