D1.DOM-获取DOM元素、修改属性

Posted 2023-03-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了D1.DOM-获取DOM元素、修改属性相关的知识，希望对你有一定的参考价值。

参考技术A

DOM：DOM（Document Object Model）文档对象模型是用来呈现以及与任意 html 或 XML文档交互的API
作用：1.实现网页特效
2.实现用户交互

DOM树：1.将 HTML 文档以树状结构直观的表现出来
2.作用：文档树直观的体现了标签与标签之间的关系

DOM对象：浏览器根据html标签生成的 JS对象
DOM的核心思想：把网页内容当做对象来处理

演示其他获取元素语法（了解）
通过id名来获取
document.getElementById(\'box\')
通过类名来获取
document.getElementsByClassName(\'box\')
通过标签名来获取
document.getElementsByTagName(\'ul\')

1.innerText

2.innerHTML

细节：innerText 与 innerHTML 设置内容的时候，会覆盖原有的内容
如何实现把原本的内容也带上？

1.设置/修改元素常用属性（src 、title等属性）
语法：对象.属性 = 值

2.通过类名操作CSS

注意说明：
1. 在JS中使用className表示类名，因为class在js中是个关键字在标签上，class属性表示类名，但在js中使用className表示类名
2. 使用className有覆盖问题

3.通过style控制样式属性
语法：对象.style.样式属性名 = 值
通过style操作样式本质上设置行内样式

4.表单的属性设置（value、type、disabled、checked、selected）
语法
获取：对象.属性名
设置：对象.属性名 = 值

定时器函数
作用: 每隔一段时间，就会来调用函数

注意易错
如下写法，会将fn() 立即调用，就没有了定时效果
setInterval(fn(), 1000) // 错误效果

HTML DOM属性

一、HTML DOM属性

属性是节点（HTML元素）的值，可以对其进行修改或获取。

编程接口：

可以通过JavaScript（以及其他编程语言：可以让计算机读的懂得语言）对HTML DOM进行访问。

所有的HTML元素被定义为对象，而编程接口则是对象方法和对象属性。方法是可以执行的动作（如，添加和修改元素）；属性是能被获取或是修改的值（如，节点名称或内容）

二、HTML DOM属性分类

innerHTMl获取元素内容；nodeName规定节点的名称；nodeValue规定节点的值；nodeType规定节点的类型。

（一）、innerHTML 属性

获取元素内容最简单的方式就是使用innerHTML属性；获取或是替换HTML元素的内容

注意：innerHTML属性可以用于获取或改变任何一个HTML元素，包括<html>和<body>

实例：获取id为box的title元素的innerHTML，getElementById是一个方法，innerHTML是属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title id="box">My title</title>
 6 </head>
 7 <body>
 8     <script>
 9     var txt=document.getElementById(‘box‘).innerHTML;
10     document.write(txt)
11     </script>
12 </body>
13 </html>

显示效果：title标签的内容正常情况下是无法在页面中显示的，但是经过设置后title元素中的内容显示在了页面中。

技术图片

（二）、nodeValue属性

nodeValue属性规定节点的值。

元素节点的nodeValue是undefined或null

文本节点的nodeValue是文本本身

属性节点的nodeValue是属性值

实例：获取元素的值，获取<p id="box">标签的文本节点值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title id="box1">My title</title>
 6 </head>
 7 <body>
 8 <p id="box">hellow world</p>
 9     <script>
10     x=document.getElementById("box");document.write(x.firstChild.nodeValue);
11     </script>
12 </body>
13 </html>