DOM中获取文档元素的主要方式

简介: DOM中获取文档元素的主要方式

1:通过(id获取

documet.getElementById('');

2:通过标签名获取(标签名不同于name属性)

document.get.getElementsByTagName('');

3:通过name属性获取(注意和第二点的区别)

  • 通过name属性获取的时候,要注意一点,那就是name属性是不支持通过具体的某一节点去查找的,只支持document节点去查找。
document.getElementsByName('')


image.png

4:通过类名去获取文档元素

document.getElementsByClassName('');

5:使用querySelector(类似于CSS选择器的方法,返回匹配到的第一个)

const pink = document.querySelector('#pink');
alert(pink.innerHTML);

image.png

6:通过querySelectorAll(返回匹配到的所有)

image.png

只能获取行内样式的情况

image.png

  • 解决办法 使用getComputedStyle,但是这种不兼容IE浏览器
# 使用getComputedStyle('对象名').属性名

如果是IE浏览器则使用下面的方法

元素对象.currentStyle[属性名]

querySelector保存的是快照是静态的数据结构,但是getElementsByTagName保存的是动态的数据结构,会随着页面的变化而变化。

相关文章
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
1305 76
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
1404 62
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
JavaScript 前端开发
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
434 4
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
104 2
|
JavaScript 前端开发 API
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
156 0

热门文章

最新文章