DOM元素 DAY17

一、什么是DOM：Document Object Model （文档对象模型)

将每一个标签/元素/文本/属性/注释，看做了一个DOM节点/元素/对象（提供了操作这些东西的属性和方法）

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，基本已经被淘汰，现在最流行的数据格式json代替了

开发建议：优先使用HTML DOM,HTML DOM实现不了的时候用核心DOM进行补充

二、DOM树：树根：document-不需要我们创建，一个页面只有一个document:由浏览器的js解释器自动生成

可以通过树根找到每一个DOM节点/元素/对象，提供了很多很多的API

三、每个DOM元素都有三大属性：

1、xx.nodeType:描述节点的类型

document节点：9

元素节点：1

属性节点：2

文本节点：3

2、xx.nodaValue:描述节点值，说白了就是获取属性值

3、***xx.nodaName:描述节点名称-判断xx是什么标签-后期搭配上事件委托（利用冒泡）

注意：返回的是一个全大写的标签名

四、*通过关系获取元素

父：xx.parentNode;

子：xx.children;-集合

第一个儿子：xx.firstElementChild;

最后一个儿子：xx.lastElementChild;

前一个兄弟：xx.previousElementSibling;

后一个兄弟：xx.nextElementSibling;

五、*递归：简单来说就是函数中，又一次调用了函数自己，迟早有一天会停下来

如何使用：遍历DOM，专门用于【遍历层级不明确】的情况

如何使用递归：2步

function 函数名（root）{

1、第一层要做什么操作就直接做

2、判断他有没有下一级，如果有下一级再次调用此方法，但是传入的实参是下一级

}

函数名（实际的根节点）

算法：深度优先！优先遍历当前节点的子节点，子节点遍历完毕后才会调到兄弟节点

缺点：同时开启大量的函数调用，消耗内存，只有一个情况采用：【遍历层级不明确】

递归 VS 循环

递归：有点：直观易用

缺点：性能较低

循环：优点：性能高，几乎不占内存

循环：较难

六、遍历API：【遍历层级不明确】的情况：TreeWalker:一个在DOM树上行走的人

缺点：1、会自动跳过根节点的操作

2、只能遍历层级不明确的DOM树，而不能遍历层级不明确的数据

如何：固定公式：

1、创建tw对象：

var te=document.createTreeWalker(根元素，NoderFilter.SHOW-ALL/SHOW-ELEMENT) ；

2、反复调用nextNode方法找到每一元素

while（(node=tw.nexNode())!==null）{

node要做什么操作

}

七、*API直接查找元素

1、按照HTML的特点去查找元素

（1）、id: var elem=document.getElementByld("id值")

（2）、class/标签名：var elems=document.getElementsByClassName/TagName/Name（"class/标签名"）；

建议：表单控件元素尽量可以不写class，因为必须要写name

2、按照CSS的选着器去查找元素

（1）、单个元素：var elem=document.querySelector（"任意css选着器"）；

强调：万一选择器匹配到多个元素，只会返回第一个

没找到null

（2）、多个元素：var elems=document.querySelectorAll("任意css选择器")；

强调：找到了集合，没找到空集合

（3）、get XXX和 querySelector XXX 有什么区别？

返回结果不同：

1、get XXX:HTML Collection - 是一个动态集合

2、queryXXX:nodeList - 是一个静态集合

动态集合：根据DOM数的改变，动态集合也会悄悄改变，每一次修改DOM树，get XXX都会悄悄再次查找元素

. 缺点：每次都会悄悄重新查找，效率较低，不能使用 forEach

静态集合：每次修改DOM树，静态集合都不会发生变化，只会认准你找的时候的第一次找到的元素

优点:每次不会悄悄重新查抄，效率较高，支持forEach

DOM元素 DAY17相关推荐

js中Dom元素及获取方法
DOM基础对象 document document.documentElement html部分 document.head document.title document.body body部分 ...
【EASYDOM系列教程】之 DOM 元素树
DOM 元素树结构与 DOM 节点树结构很相似,区别仅在于是利用节点解析 HTML 元素,还是利用元素解析 HTML 元素. DOM 树结构还记得下面这张图吗? 上图中的 HTML 页面源代码如下: ...
JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
JavaScriptjQuery.查询DOM元素
查询DOM元素查询单个元素document.getElementById <!DOCTYPE html> <html> <head> <title>访 ...
android 一维数组遍历,$.each()循环遍历一维数组、二维数组、JSON数据和DOM元素
本文介绍$.each()循环遍历一维数组.二维数组.JSON数据和DOM元素. 请注意在使用JQuery $.each()方法前,要首先引用jquery库文件. $.each()循环遍历一维数组 Jq ...
不变违规：_registerComponent（...）：目标容器不是DOM元素
本文翻译自:Invariant Violation: _registerComponent(-): Target container is not a DOM element I get this e ...
Jquery加载dom元素
JQuery加载DOM元素使用JQuery的第一件事就是下载jquery库,并调成Jquery库! <script src="js/jquery-1.7.1.min.js" ...
JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...

DOM元素 DAY17

DOM元素 DAY17相关推荐

最新文章

热门文章