JavaScript——使用DOM操作元素

SouthernWind
147 阅读7分钟

​持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

JavaScript DOM

DOM简介

1.什么是DOM

1.DOM全称Document Object Model，翻译为文档对象模型。 2.DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 3.DOM是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

2.DOM 树

HTML DOM 树

ct_htmltree.gif

1.DOM树把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。 文档：一个页面就是一个文档，DOM中使用document表示。 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。 2.根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 1.文档节点：整个文档是一个文档节点。 2.标签节点：网页中的每个标签（也即每个 HTML 元素）是标签节点。 标签节点通常称为“元素节点”或“元素”，使用element表示。 3.属性节点：每个 HTML 属性是属性节点。 4.文本节点：HTML 元素内的文本是文本节点。文本节点包含文字、空格、换行、回车、制表符等。 5.注释节点：注释是注释节点。 3.HTML DOM 树中的所有节点均可通过 JavaScript 进行访问， 所有 HTML 元素（节点）均可被修改，也可以创建或删除。 4.DOM把以上内容都看作是对象。 5.我们在实际开发中，节点操作主要操作的是元素节点。

1.操作元素(元素=元素节点=标签节点)

1.获取元素(元素=元素节点=标签节点)

1.根据ID获取元素

语法：document.getElementById(id); 参数：id值，区分大小写的字符串。 返回值：元素对象 或 null。

2.根据标签名获取元素

语法：document.getElementsByTagName('标签名'); 或 element.getElementsByTagName('标签名'); 参数：标签名。 返回值：元素对象集合。

3.根据类名获取元素

语法：document.getElementsByClassName('类名'); 参数：类名，即class属性的值。 返回值：元素对象集合。

4.根据名称获取元素

语法：document.getElementsByName('名称'); 参数：名称，即name属性的值。 返回值：元素对象集合。

5.根据指定选择器获取所有元素(H5新增)

语法：document.querySelectorAll('选择器'); 参数：选择器，选择器要加符号，比如'#nav'。 返回值：元素对象集合。

6.根据指定选择器获取第一个元素(H5新增)

语法：document.querySelector('选择器'); 参数：选择器，选择器要加符号，比如'#nav'。 返回值：第一个元素对象。

7.获取特殊元素(body、html)

document.body：返回body元素对象。 document.documentElement：返回html元素对象。

2.获取/改变元素的内容

1.普通元素的内容操作

普通元素：相对表单元素来说的，指除了表单元素的以外的其他元素。 使用innerHTML与innerText 1.获取内容时的区别： innerHTML获取的是从对象的起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行。 innerText获取的是从对象的起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。 2.设置内容时的区别： innerHTML会识别HTML标签。前后空格和换行都保留。 innerText不会识别HTML标签(会把HTML标签当做一个普通的文本)。前后空格和换行都保留。

1.获取元素对象的内容_innerHTML方式：document.getElementById("p1").innerHTML
  获取元素对象的内容_innerText方式：document.getElementById("p1").innerText
2.设置元素对象的内容_innerHTML方式：document.getElementById("p1").innerHTML = "   中国  ";
  设置元素对象的内容_innerText方式：document.getElementById("p1").innerText = "   中国  ";

2.表单元素的内容操作

表单元素<input>元素、<select>元素、<option>元素、<textarea>元素。 表单元素的内容操作使用value。

1.获取表单的值：var val = document.getElementById("txt1").value;
2.设置表单的值：document.getElementById("txt1").value = "华夏";

3.获取/改变元素的属性值

1.普通元素的属性操作

普通元素：相对表单元素来说的，指除了表单元素的以外的其他元素。 常见属性列举：href、class、src、title、alt....

1.获取元素对象的属性值：元素对象.属性名
2.设置元素对象的属性值：元素对象.属性名 = 值;

2.表单元素的属性操作

表单元素<input>元素、<select>元素、<option>元素、<textarea>元素。 常见属性列举：type、disabled、checked、selected、readOnly....

1.获取元素对象的属性值：元素对象.属性名
2.设置元素对象的属性值：元素对象.属性名 = 值;
注：disabled、checked、selected这些属性的值是布尔型。

3.元素的样式属性操作

指通过 JS 修改元素的大小、颜色、位置等样式。

1.通过style属性操作
1.获取元素对象的样式属性值：元素对象.style.样式属性
2.设置元素对象的样式属性值：元素对象.style.样式属性 = 值;
注：适合于样式较少或者功能简单的情况。
2.通过className属性操作
1.获取元素对象的样式属性值：元素对象.className
2.设置元素对象的样式属性值：元素对象.className = 值;
注：适合于样式较多或者功能复杂的情况。
注2：因为class是关键字，所有使用className。
注3：className会直接更改元素的类名，会覆盖原先的类名。

注：使用style设置的样式，优先于className设置的样式。

练习： 实现开关灯功能： 在body标签中写一个“关灯”按钮， 点击“关灯”之后，浏览器中间区域变黑，按钮显示为“开灯”， 点击“开灯”之后，浏览器中间区域恢复正常，按钮显示为“关灯”。

4.获取/改变元素的自定义属性

0.内置属性

内置属性是指元素本身自带的属性。如上面2中的所有内容，我们已经学习过了。

1.获取元素对象的属性值：元素对象.属性名      //不可用于获取自定义属性值
2.设置元素对象的属性值：元素对象.属性名 = 值;//也可用于设置自定义属性值

1.自定义属性

自定义属性是指我们程序员自己定义的属性。 自定义属性目的是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

1.获取元素对象的自定义属性值：元素对象.getAttribute('属性名');   //也可用于获取内置属性值
2.设置元素对象的自定义属性值：元素对象.setAttribute('属性名',值);//也可用于设置内置属性值
3.移除元素对象的自定义属性：元素对象.removeAttribute('属性名'); //也可用于移除内置属性

2.HTML5自定义属性

自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。因此，HTML5中新增了自定义属性。HTML5中规定自定义属性的属性名以”data-“开头。

1.获取H5自定义属性值：元素对象.getAttribute("以'data-'开头的属性名")
1.获取H5自定义属性值2(H5新增)：元素对象.dateset.属性名中'data-'后面的部分   //只能获取“data-”开头的
1.获取H5自定义属性值3(H5新增)：元素对象.dateset["属性名中'data-'后面的部分"]//只能获取“data-”开头的
2.设置H5自定义属性值：元素对象.setAttribute("以'data-'开头的属性名",值);
3.移除H5自定义属性：元素对象.removeAttribute("以'data-'开头的属性名");
注：如果自定义属性里面有多个-链接的单词，获取的时候须采取驼峰命名法。
注2：dataset是一个集合，里面存放了所有以data开头的自定义属性。
​
比如<div id="divId" data-attr1="one"></div>
1.获取H5自定义属性值：document.getElementById('divId').getAttribute('data-attr1')
1.获取H5自定义属性值2(H5新增)：document.getElementById('divId').dateset.attr1
1.获取H5自定义属性值3(H5新增)：document.getElementById('divId').dateset['attr1']
2.设置H5自定义属性值：document.getElementById('divId').setAttribute('data-attr1',2);
3.移除H5自定义属性：document.getElementById('divId').removeAttribute('data-attr1');
avatar
文章
阅读
粉丝