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

Posted

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>

 

显示效果:

技术图片

 

 (三)、nodeName属性

nodeName规定节点的名称。

nodeName是只读的

元素节点的nodeName与标签名相同

文本节点的nodeName始终是 #text

文档节点的nodeName始终是#document

注意:nodeName始终包含HTML元素的大写字母标签名。

 

(四)、nodeType属性

nodeType属性返回节点的类型,nodeType是只读类型的。

比较重要的节点类型有

元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

以上是关于D1.DOM-获取DOM元素、修改属性的主要内容,如果未能解决你的问题,请参考以下文章

HTML DOM属性

JavaScript 学习-32.HTML DOM 获取和修改属性节点

JavaScript — DOM API

JavaScript — DOM API

JavaScript — DOM API

DOM基础及事件基础