Dom笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Dom笔记相关的知识，希望对你有一定的参考价值。
什么是DOM: 专门操作网页内容的API
3种API:
1. 核心DOM: 万能的。可操作一切结构化文档。 包括: html XML
DOM Tree:
什么是DOM树: 网页的所有内容，在内存中其实是以树形结构存储的。
何时创建: 当浏览器读取到html内容时，自动创建DOM树。
如何创建:
1. 读到html文档时，先创建根节点对象：
document 查找元素，创建元素
2. 开始顺序读取html文档的内容，创建子节点。
网页中一切内容，都是DOM树上的节点对象
节点对象: Node 所有节点对象的父类型
三大属性:
node.nodeType: 节点的类型
何时使用: 判断或区分节点的类型时
如何使用: 值是数字
document: 9
元素节点: 1
属性节点: 2
文本节点: 3
DOCTYPE: 10
问题: nodeType无法细致的区分每种元素
node.nodeName: 节点的名称:
何时使用: 判断或区分节点名时
更多用于细致区分每种元素标签名
document: #document
元素节点: 标签名 (全大写)
属性节点: 属性名
文本节点: #text
DOCTYPE: html
node.nodeValue: 节点的值
何时使用: 只用于获得属性的值和文本的内容
document: null
元素节点: null
属性节点: 属性值
文本节点: 文本内容
DOCTYPE: null
节点间关系:2大类：
节点树: 包含所有节点的树结构
任何文本，也是节点
所以，节点树，会受到看不见的空文本的干扰
1. 父子关系: 4个:
elem.parentNode => 获得elem的父节点 elem.childNodes ->类数组对象
=> 获得elem的所有*直接*子节点
elem.firstChild
=> 获得elem的第一个子节点
elem.lastChild
=> 获得elem的最后一个子节点
2. 兄弟关系: 2个:
elem.previousSibling
=> 获得elem的前一个兄弟节点
elem.nextSibling
=> 获得elem的后一个兄弟节点
何时使用: 站在现有节点，查找周边节点
建议，查找节点要就近。
元素树:仅包含元素节点的树结构
不是一颗新的树，仅是节点树的子集。
优: 仅包含元素节点，不受空文本的干扰
缺: 无法访问文本节点
变通: elem.innerHTML
包括: 2大类:
节点树 元素树
parentNode parentElement 没有node
childNodes children
firstChild firstElementChild
lastChild lastElementChild
previousSibling previousElementSibling
nextSibling nextElementSibling
递归遍历: 遍历指定父节点下的所有子节点
2步:
1. 先定义函数，仅遍历直接子节点
2. 对每个直接子节点，再次调用当前遍历函数本身。
childNodes: 返回所有直接子节点对象，保存在一个类数组对象中。
动态集合: 不实际存储对象的完整属性， 问题：每次访问动态集合时，都会反复去DOM树查找。 解决: 遍历，首先将length属性的值，保存在变量中。用变量作为循环的条件
深度优先：每次都优先遍历子节点。
所有子节点遍历完毕，再遍历兄弟节点
遍历API:
1. NodeIterator: 按照深度优先的原则，依次读取指定父节点下的每个节点
如何使用: 2步:
1. 创建NodeIterator对象:
var iterator=
document.createNodeIterator(
parent,NodeFilter.SHOW_ALL
.SHOW_ELEMENT
null,false
);
2. 反复调用:
var currNode=iterator.nextNode();
//让iterator跳到下一个节点
到头返回null
强调: 调用一次nextNode，只向前跳一个节点。
iterator.previousNode();
退一个节点
2.TreeWalker:基本用法和NodeIterator完全一样。
强调: 1.不遍历根节点，只遍历子节点
2. 又提供了向四周跳转的方法:
walker.parentNode();
.firstChild();
.lastChild();
.previousSibling();
.nextSibling();
2. 查找:
DOM: 查找，修改，创建和删除
1. 按HTML属性查找:
1. 按id查找一个元素:
var elem=document.getElementById("id")
强调: ById只能用在document对象上
2. 按标签名查找多个子元素:
var elems=
parent.getElementsByTagName("标签名")
强调: 1.ByTagName可用在任意父元素上
2.ByTagName不止查询直接子节点，且查询所有后代节点。
3. 按class属性查找:
var elems=
parent.getElementsByClassName("class")
4. 按name属性查找:
var elems=
parent.getElementsByName("name");
强调: 即使返回一个元素，也会放在集合中返回。必须加[0]，才能去除唯一一个元素
返回值elems: 动态集合
2. 用选择器查找: Selector API
jQuery的核心
1. 找1个:
var elem=
parent.querySelector("selector");
2. 找多个:
var elems=
parent.querySelectorAll("selector");
强调: elems非动态集合
不会导致反复遍历DOM树
何时使用: 如果需要多次getxxx才能找到目标元素时
不适合使用: 基于现有节点向上或向周围爬树时
效率: getXXX的效率 比 SelectorAPI高！
因为getXXX返回动态集合，不需要准备所有数据就可返回结果。——快
selectorAPI，准备好所有相关数据，再返回。——慢
返回值: getXXX -> 动态集合，可能造成反复遍历DOM树
selectorAPI -> 非动态集合,不会导致反复遍历DOM树
如何选择:
如果一次getXXX查找即可找到结果时，首选getXXX
如果需要多次getXXX才能找到目标元素时，首选selectorAPI
不需要查找，可直接获得的元素:
document.body -> <body>
document.head -> <head>
document.documentElement -> <html>
以上是关于Dom笔记的主要内容，如果未能解决你的问题，请参考以下文章