首页 > 代码库 > 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模型