DOM总结

最新推荐文章于 2024-06-12 23:26:22 发布

wangling123s

最新推荐文章于 2024-06-12 23:26:22 发布

阅读量283

点赞数 1

文章标签： javascript dom

本文链接：https://blog.youkuaiyun.com/wangling123s/article/details/120267073

版权

1.什么是DOM？
专门操作网页内容的一套函数和对象

DOM还是一个标准，由W3C制定

广义JS=ECMAScipt+DOM+BOM

核心语法 +操作网页内容+访问浏览器软件（与网页无关）

要想操作网页内容，为页面添加交互效果，其实只能用DOM函数和对象

包括：5件事增删改查事件绑定

2.DOM树

在内存中，集中保存一个网页中所有内容的树形结构

突出上下级包含关系

如何：

1.当浏览器读取带一个.html文件时，会先在内存中创建一个document，最为整个树的根对象。

2.扫描节点，加载到对应节点位置

任何内容都会变成节点对象：<>元素节点 “”文本节点 id属性节点，轻易访问不到 document根节点

3.查找元素

1.不需要查找，就可直接获得

document.documentElement <html>

document.head <head>

document.body <body>

2.树上的节点之间有各种各样的关系，可以互相访问到

节点树：任何内容都会变成节点对象包括空格等根节点document

父子关系：

节点.parentNode 获得当前节点的父节点

父节点.childNodes 获得当前父节点下的所有直接子节点的类数组对象。

父节点.firstChild 获得当前父节点下的第一个直接子节点

父节点.lastChild 获得当前父节点下最后一个直接子节点

兄弟关系：

节点.previousSibling 获得当前节点平级的前一个相邻的兄弟节点

节点.nextSibling下一个兄弟节点

元素树：

仅包含元素节点的树结构根元素为html

元素树不是一个新树，而是原来节点树中添加了仅指向元素节点的新属性而形成一棵子树结构。

父子关系：

元素.parentElement/parentNode（因为特殊的标签才能做父元素）获得当前元素的父元素

父元素.children获得当前父元素下的所有直接子元素的类数组对象。

父元素.firstElementChild 获得当前父元素下的第一个直接子元素

父元素.lastElementChild 获得当前父元素下最后一个直接子元素

兄弟关系：

元素.previousElementSibling 获得当前元素平级的前一个相邻的兄弟元素

元素.nextElementSibling下一个兄弟元素

nodeName标签名

类数组对象可以用length

3.按HTML特征查找

4种：

1.按id属性查找

var 元素=document.getElementById("id")

在整个页面中查找id为指定名称的一个元素

返回值：如果找到，返回一个元素对象

如果没找到，返回null

强调：只能用document调用。不能在随意父元素上调用

2.按标签名查找

var 类数组对象=父元素.getElementsByTagName("标签名")

在指定父元素下查找所有标签名为指定标签名的后代（并不是直接子元素，而是所有后代元素）元素

返回值：如果找到，返回多个元素组成的类数组对象

如果没找到，返回空的类数组对象 [].length=0

强调：可在任意父元素下查找，通常指定在某个父元素下查找后代，是为了减少查找范围，提高查找效率。

3.按class属性查找

var 类数组对象=父元素.getElementsByClassName("class名")

在指定父元素下查找class属性（包含）指定类名的所有元素（不是只包含直接子元素中的）

返回值：如果找到，返回多个元素组成的类数组对象

如果没找到，返回空的类数组对象 [].length=0

强调：可在任意父元素下查找，通常指定在某个父元素下查找后代，是为了减少查找范围，提高查找效率。

4.按name属性查找

var 类数组对象=document.getElementsByName("name名")

返回值：如果找到，返回多个元素组成的类数组对象

如果没找到，返回空的类数组对象 [].length=0

强调：只能用document调用

何时：在表单中查找表单元素时

5.当查找条件特别复杂时：用选择器当条件查找元素：2个函数：

1.查找一个符合条件的元素：

var 元素=父元素.querySelector("任意复杂的选择器")

在指定父元素下查找符合选择器要求的一个元素

返回值：如果找到，返回一个元素对象

如果没找到，返回-1

2.查找多个符合条件的元素：

var 类数组对象=父元素.querySelectorAll("任意复杂的选择器")

在指定父元素下查找符合选择器要求的多个元素组成的类数组对象

返回值：如果找到，返回类数组对象

如果没找到，返回空集合

强调：1.可以以任意父元素调用来限制查找的范围

2.（）的选择器参数，不用每次都写完整，只要以.前的父元素为起点开始写就行！

3.不仅查找直接子元素，且在所有后代中查找符合条件的

6.DOM优化之一：

如果只有一个条件就可以找到想要的元素时

尽量使用getElementsByXXX()函数查找---效率高

只有条件复杂时，才选择按选择器查找--效率低要通过绘图引擎 css解析器js再查找

4.控制台有个习惯，相邻的多个相同的输出结果，只显示一个，在左侧圆圈中标出重复的次数。

5.DOM操作的标准步骤

查找触发事件的元素

给元素绑定事件处理函数

查找修改的元素

警告：凡是从页面上获得内容，都是字符串

修改元素

警告：从页面上获得的值，都是按值传递下来的字符串副本，修改变量，元素中的内容不会自动变化，所以修改后，都要放回去。

如：span.innerHTML=n;

什么是事件：浏览器自动触发的或用户手动触发的页面元素状态的改变

事件处理：通过元素的事件属性和事件处理函数

事件属性：每个元素上都有一批on开头的属性，比如：onclick onmouseover...但是，这些事件属性的默认值都为null，也就是说，即使发生什么事件，也什么都不做。

事件处理函数：当事件发生时，希望自动执行的函数。

将事件处理函数，提前赋值给元素的事件属性保存起来

只要在事件处理函数中想获得当前正在单击的按钮，最可靠的办法就是this，一定不要用全局变量

for(var btn of btns){

btn.οnclick=function(){

this.style.backgroundColor="red";

}

6.修改

3样：

内容:

1.获取或修改原始HTML片段：元素.innerHTML （原始html代码）

2.获取或修改纯文本内容：元素.textCotent （解析后样子的html）

去掉了内嵌的标签

将特殊符号翻译成正文

以上两个获得的都是双标记中，开始标记和结束标记之间的内容

3.表单元素，没有结束标记所以也就没有innerHTML，textCotent

获取或设置表单元素的内容：表单元素.value

属性:

3种

1.HTML标准属性

HTML标准中规定的那些字符串类型的属性，比如id，title，name，value

获取或修改：2种方式

1.早期的核心DOM函数：4个

var 属性值=元素.getAttribute("属性名") 获取属性值

元素.setAttibute("属性名","新值")

var bool=hasAttribute("属性名")

元素.removeAttribute("属性名")

2.后来的HTML DOM函数

是在旧版基础上，对部分常用函数和常用对象提供的简化版函数

做的第一个简化：每个元素对象中都提前预置好了所有HTML标准属性，只不过，值暂时为“”。此后在操作只需要

元素.属性名

强调：只要修改标准属性，值必须是字符串，如果给的不是字符串，DOM会自动转为字符串。

判断是否包含指定属性：元素.属性名！=="",说明包含。因为默认值为""

移除属性：=""

特例：js中不能用.class,因为class是js的关键字，所以，凡是操作html中的class属性，一律更名为className。

2.状态属性

比如：disabled checked selected mutiple

只能用.访问，比如：btn.diabled=true

css中有一组状态伪类：:disabled :checked :selected :not(:checked)

3.自定义扩展属性

程序员自发添加的属性

何时：在客户端临时缓存数据

代替其他选择器，用来选择触发事件的元素，为元素绑定事件

自定义行业规范data-自定义属性名=“值”

不能用.访问

如：data-属性名

可以用元素.dataset.属性名

样式：

修改内联：

每个元素都有一个style属性，代表html中开始标签中的style属性元素

元素的style属性又包含了所有css样式属性

修改元素对象的style属性中的css样式属性，等效于直接修改html中开始标签的style=""，要加单位。

强调：所有带-的css属性，一律去横线，变驼峰命名

计算后的样式：var style=getComputedStyle(元素) 获得指定元素计算后的完整样式

style.fontsize只读的

7.添加

3步：

1.创建一个空元素

var a = document.createElement("a");

只能用document调用

2.为空元素添加关键属性和内容

a.href=""

a.innerHTML=""

3.将空元素挂载到DOM树

3种

1.挂在一个父元素下的所有子元素末尾追加

父元素.appendChild(新元素)

2.插入到一个父元素下的某个子元素之前

父元素.insertBefore(新元素,现有元素)

3.替换父元素下一个现有的旧元素

父元素.replaceChild(新元素，旧元素)

8.删除

父元素.removeChild(子元素)

9.DOM常用对象

image对象

Select/Option

代表select元素

属性：.selectedIndex

Table/...

From/表单元素