目录
一、什么是DOM:Document Object Model(文档对象模型)
一、什么是DOM:Document Object Model(文档对象模型)
将每一个标签/元素/属性/文本/注释,看做了一个DOM节点/元素/对象(提供了操作这些东西的属性和方法)
面试题:HTML/XHTML/DHTML/XML
HTML - 网页
XHTML - 更严格的网页
DHTML - Dynamic:动态的网页,其实并不是新技术、新概念,只是将现有技术的整合统称,使我们网页在离线版也具有动态效果
DHTML:HTML+CSS+JS(dom)
XML - 数据格式
DOM:原本是可以操作一切结构化文档的 HTML 和 XML,后来为了方便各类开发者分为了3个部分
1、核心DOM:【无敌】,既可以操作HTML 和 XML
缺点:API比较繁琐
2、HTML DOM:只能操作HTML,API简单,缺点:比如属性部分,只能操作标准属性,不能操作自定义属性
3、XML DOM:只能操作XML,XML基本已经被淘汰了 - 现在最流行的数据格式json代替了
开发建议:优先使用HTML DOM,HTML DOM实现不了的时候在用核心DOM进行补充
二、DOM树:
树根:document
可以通过数个你找到每一个DOM节点/元素/对象,提供了很多很多的API
三、每个DOM元素都有三大属性:
1、xx.nodeType:描述节点的类型
document节点:9
元素节点:1
属性节点:2
文本节点:3
以前有用:判断xx是不是一个页面元素 - 因为以前我们找元素的方法和大家现在不一样
2、xx.nodeValue:描述节点值,说白了就是获取属性值
以前有用:因为我们获取一个属性值没有现在这么容易
3、xx.nodeName:描述节点名称 - 判断xx是什么标签 - 后期搭配上事件委托(利用冒泡)
注意:返回的是一个全大写的标签名
四、通过 关系 获取元素
父:xx.parentNode;
子:xx.children; - 集合
第一个儿子:xx.firstElementChild;
最后一个儿子:xx.lastElementChild;
前一个兄弟:xx.previousElementSibling;
后一个兄弟:xx.nextElementSibling;
五、递归
简单来说就是函数中,又一次调用了函数自己,迟早有一天会停下来
何时使用:遍历DOM,专门用于【遍历层级不明确】的情况 - 不光可以遍历层级不明确的DOM树,还可以遍历层级不明确的数据
如何使用递归:2步
function 函数名(root){
① 第一层要做什么操作就直接做
② 判断他有没有下一级,如果有下一级再次调用此方法,但是传入的实参是下一级
}
函数名(实际的根节点)
算法:深度优先!优先遍历当前节点的子节点,子节点遍历完毕才会调到兄弟节点
缺点:同时开启大量的函数调用,消耗能存,只有一个情况采用:【遍历层级不明确】
递归 vs 循环
递归:优点:直观、易用
缺点:性能较低
循环:优点:性能高,几乎不占内存
缺点:难得一匹
六、遍历API
遍历层级不明确的情况:TreeWalker:一个在DOM树上行走的人
缺点:① 会自动跳过根节点的操作
② 只能遍历层级不明确的DOM树,而不能遍历层级不明确的数据
如何:固定公式:
1、创建tw对象:
var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/SHOW_ELEMENT);
2、反复调用nextNode方法找到没一个元素
while((node=tw.nextNode())!==null){
node要做什么操作
}
七、API直接查找元素
1、按照HTML的特点去查找元素
①id:
var elem=document.getElementById("id值")
②class/标签名:
var elems=document.getElementsByClassName/TagName/Name("class/标签名");
建议:表单控件元素尽量可以不写class,因为必须要写name
2、按照CSS的选择器去查找元素
① 单个元素:var elem=document.querySelector("任意css选择器");
强调:万一选择器匹配到多个元素,只会返回第一个
没找到null
② 多个元素:var elems=document.querySelectorAll("任意css选择器");
强调:找到了集合,没找到空集合
更适合做复杂查找
面试题:getXXX 和 querySelectorXXX 有什么区别?
返回结果不同:
1、getXXX:HTMLCollection - 是一个动态集合
2、queryXXX:nodeList - 是一个静态集合动态集合:根据DOM树的改变,动态集合也会悄悄改变,每一次修改DOM树,getXXX都会悄悄再次查找元素
缺点:每次都会悄悄重新查找,效率较低,不能使用forEach静态集合:每次修改DOM树,静态集合都不会发生变化,只会认准你找的时候的第一次找到的元素
优点:每次不会悄悄重新查找,效率较高,支持forEach