DOM： Document Object Model，文档对象模型；js提供了丰富的api来 *** 作文档内容。
DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body
节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。
可以通过 nodeType查看节点类型 ： 1元素节点、3文本节点
特殊的元素节点：
1、html元素
2、body元素
3、head元素
节点 *** 作的api（属性和方法）
1、nodeName：只读属性，可以读取节点名称
2、nodeType：只读属性，读取节点类型
3、 hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。
4、childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法
5、firstChild：获得节点的第一个子节点
6、lastChild：获得节点的最后一个子节点
7、querySelector()：
参数：string类型，css选择器
作用：获得文档中第一个符合选择器条件的节点
兼容：在IE9以下不支持
8、 querySelectorAll()： // 获得的都是静态集合
参数：string类型，css选择器
作用：获得文档中所有符合选择器条件的节点集合（类数组结构）
兼容：在IE9以下不支持
注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。
9、previousSibling：获取节点的前一个兄弟节点
10、nextSibling：获取节点的后一个兄弟节点
11、parentNode：获得节点的父节点（父节点一定是元素节点）
12、removeChild()：节点删除它的指定子节点
DOM *** 作元素：暂时不用的隐藏、一定不用的删除。
13、cloneNode()：克隆一个节点
参数：boolean类型，true深克隆，false浅克隆，默认浅克隆
深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点
浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点
14、areplaceChild(b,c)：用b替换c
其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。
15、areplaceWith(b)：用b替换a
a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。
16、ainsertBefore(b,c)：在c前面插入b
其中，a是c的父节点，c是已经存在的节点，b是新节点
17、aappendChild(b)：在a末尾追加b
a是父节点，b是a的子节点, c是子节点
元素节点的相关api
1、getElementsByTagName()：根据标签名获得元素集合（类数组结构）
区别：HTMLCollection 是动态集合，NodeList 是静态集合。
2、createElement()：根据标签名创建新元素
3、id：读写属性，可以读取或设置元素的id值
4、className：读写属性，可以读取或设置元素的class值
5、classList：读取标签的类名集合（类数组结构）
add()：为元素新增类名，如果类名已存在不会重复添加
remove()：删除元素指定类名，如果类名不存在不会执行 *** 作
元素的属性分为两类：
一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过语法读取，需要通过 *** 作方法访问。
6、setAttribute(name,value)
参数：name表示要设置的属性名，value要为属性设置的值
无返回值
7、getAttribute(name)
参数：name表示要读取的属性名
返回值：返回属性的值，如果属性不存在会返回null
8、removeAttribute(name)
参数：name表示要删除的属性名
无返回值
说明：setAttribute()、getAttribute()、removeAttribute()都可以 *** 作元素的本地属性和自定义属性。
element拓展：
兼容：以下属性、方法在IE9以下不支持。
1、children：读取元素的所有元素子节点集合（类数组）
2、parentElement：读取元素的父元素节点
3、previousElementSibling：读取前一个元素兄弟节点
4、nextElementSibling：读取后一个元素兄弟节点
5、firstElementChild：读取第一个元素子节点
6、lastElementChild：读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除
2查找元素
3DOM 节点
4节点 *** 作
DOM 中的三个字母，D（文档）可以理解为整个 Web 加载的网页文档；O（对象）可
以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是 document
对象；M（模型）可以理解为网页文档的树型结构。
DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为
W3C 标准。DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera17+。
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将
这种树型结构理解为由节点组成。
从上图的树型结构，我们理解几个概念，html 标签没有父辈，没有兄弟，所以 html 标
签为根标签。head 标签是 html 子标签，meta 和 title 标签之间是兄弟关系。如果把每个标签
当作一个节点的话，那么这些节点组合成了一棵节点树。
PS：后面我们经常把标签称作为元素，是一个意思。
W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行 *** 作。
分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、
setAttribute()和 removeAttribute()。
getElementById()方法，接受一个参数：获取元素的 ID。如果找到相应的元素则返回该
元素的 HTMLDivElement 对象，如果不存在，则返回 null。
当我们通过 getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，
而通过这个节点对象，我们可以访问它的一系列属性。
getElementsByTagName()方法将返回一个对象数组 HTMLCollection(NodeList)，这个数
组保存着所有相同元素名的节点列表。
getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组
HTMLCollection(NodeList)。
getAttribute()方法将获取元素中某个属性的值。它和直接使用属性获取属性值的方法有
一定区别。
setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如
果属性本身已存在，那么就会被覆盖。
removeAttribute()可以移除 HTML 属性。
1node 节点属性
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，
分别为：nodeName、nodeType 和 nodeValue。
节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个
元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。
childeNodes 属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点
和文本子节点。
firstChild 用于获取当前元素节点的第一个子节点，相当于 childNodes[0]；lastChild 用于
获取当前元素节点的最后一个子节点，相当于 childNodes[boxchildNodeslength - 1]。
ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当于 document。
parentNode 属性返回该节点的父节点，previousSibling 属性返回该节点的前一个同级节
点，nextSibling 属性返回该节点的后一个同级节点。
attributes 属性返回该节点的属性节点集合。
DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换
节点。
write()方法可以把任意字符串插入到文档中去。
appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。
createTextNode()方法创建一个文本节点。
insertBefore()方法可以把节点创建到指定节点的前面。
cloneNode()方法可以把子节点复制出来。
8removeChild()方法
removeChild()方法可以把
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）