DOM
文档对象模型
Document Object Model
将HTML中的文档都抽象成一个节点
将整篇html文档称作一个文档
html:父元素 子节点
head 子节点
body 子节点
head和body互为兄弟节点
DOM树
html
| |
head body
| |
title meta
html中的任意东西都是一个节点
Document类型 文档类型 document
Element类型 元素类型 div span
Text类型 文本类型 body-->hello
Comment类型 注释类型 <!--注释-->
Node类型是以上类型的父构造函数:
nodeType
9-Document
1-Element
3-Text
8-Comment
nodeValue
节点值,一般元素节点的值是null
可以用在注释上,是注释的内容,Text上。
nodeName
节点名称,一般用在元素节点上,返回的是大写的元素名称
childNodes
document.body.childNodes
返回子节点组成的类数组对象的NodeList,包括Element,Text,Comment类型
[0]
.item(0)
类数组转换为数组:**
Array.prototype.slice.call(类数组对象,参数列表);
Array.prototype.slice.apply(类数组对象,参数数组)
firstChild
返回NodeList中的第一个,在0号位置上
lastChild
返回NodeList中的最后一个,在最后的位置上
nextSibling
返回NodeList中的下一个兄弟节点
previousSibling
返回NodeList中的上一个兄弟节点
parentNode
返回父节点
同一个NodeList中的子节点,有同一个父节点
hasChildNodes()
返回true/false,判断是否有孩子节点
用父节点来调用以下4个方法:
父节点.appendChild(孩子节点)
追加孩子节点到末尾
父节点.insertBefore(要插入的点,参考位置的节点)
在参考节点位置之前添加【插入的点】
父节点.replaceChild(新节点,旧节点)
以新节点替换旧节点
父节点.removeChild(要删除的点)
将要删除的点删除
节点.cloneNode(true/false);
复制节点/创建节点的副本
如果参数是true,深复制,复制元素和后代,即复制节点以及整个子节点数。
如果参数是false,浅复制,只复制该元素,不复制后代
该方法不复制事件
父节点.normalize()
将相邻的Text合并
HTMLCollection-->父构造函数是谁?