javascriptDOM笔记(一)

最新推荐文章于 2022-08-26 19:13:18 发布

码农1425

最新推荐文章于 2022-08-26 19:13:18 发布

阅读量313

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_25707185/article/details/52981569

版权

JavaScript 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

正课:
1. 什么是DOM:
2. ***DOM Tree:
3. 查找:

1. 什么是DOM:
js:ES(核心语法 9)+
DOM(专门操作网页内容的API 3)+
BOM(专门操作浏览器窗口的API 2)

鄙视题： HTML XHTML DHTML XML
HTML: 专门编写网页内容的语言
XHTML: 更严格的XHTML标准
DHTML: 一切可以实现网页动态效果的技术的统称。
包含:HTML+CSS+JS
XML: 专门存储和传输格式化数据的结构化文档。
<student id="1001">
<name>范冰冰</name>
<math>89</math>
<chs>65</chs>
<eng>91</eng>
</student>
JSON:
'{"name":"范冰冰","math":89,...}'

什么是DOM: 专门操作网页内容的API
3种API:
1. 核心DOM: 万能的。可操作一切结构化文档。包括: HTML XML
问题: API繁琐
解决:
2. HTML DOM: 对核心DOM中*部分*常用的API，提供的简化版本。——不是万能
专门操作HTML网页内容的API
实际开发中:选最简单用。
如果简单的无法实现，就用会用的
3. XML DOM: 专门操作XML文档的API

2. ***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属性的值，保存在变量中。用变量作为循环的条件
深度优先：每次都优先遍历子节点。

所有子节点遍历完毕，再遍历兄弟节点

正课:
1. DOM Tree
遍历API:
2. 查找:

1. DOM Tree
遍历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 vs Selector API
效率: getXXX的效率比 SelectorAPI高！
因为getXXX返回动态集合，不需要准备所有数据就可返回结果。——快
selectorAPI，准备好所有相关数据，再返回。——慢
返回值: getXXX -> 动态集合，可能造成反复遍历DOM树
selectorAPI -> 非动态集合,不会导致反复遍历DOM树

如何选择:
如果一次getXXX查找即可找到结果时，首选getXXX
如果需要多次getXXX才能找到目标元素时，首选selectorAPI

不需要查找，可直接获得的元素:
document.body -> <body>
document.head -> <head>
document.documentElement -> <html>