了解document

最新推荐文章于 2024-07-25 09:24:40 发布

cx -

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量529

点赞数 18

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_78030190/article/details/140515123

版权

1、访问元素节点

所谓 “访问” 元素节点，就是指 “得到”、“获取” 页面上的元素节点。

对节点进行操作，第一步就是要得到它。

访问元素节点主要依靠 document 对象。

2、认识 document 对象

document 对象是 DOM 中最重要的东西，几乎所有 DOM 的功能都封装在了 document 对象中。

document 对象也表示整个 HTML 文档，它是 DOM 节点树的根。

document 对象的 nodeType 属性值是 9。

3、访问元素节点的常用方法

注意：以下方法的参数都是字符串类型 ' '。

4\4

方法	功能	兼容性
document.getElementById()	通过 id 得到元素	IE 6
document.getElementsByTagName()	通过标签名得到元素数组	IE 6
document.getElementsByClassName()	通过类名得到元素数组	IE 9
document.querySelector()	通过选择器得到元素（es6新特性）	IE 8 部分兼容、IE 9 完全兼容
document.querySelectorAll()	通过选择器得到元素数组（es6新特性）	IE 8 部分兼容、IE 9 完全兼容

Element：元素
query：查询
Selector：选择器

4、getElementById()

document.getElementById() 功能是通过 id 得到元素节点。

HTML

<div id="box">我是一个盒子</div>
<p id="para">我是一个段落</p>

var box = document.getElementById('box');
var para = document.getElementById('para');

注意：如果页面上有相同id的元素，则只能得到第一个。原则上，html中同一名称的id也只能出现一次。

5、延迟运行

通常 JS 代码要写到 HTML 结构的最后，否则 JS 无法找到相应的 DOM 节点。

可以使用 window.onload = function(){} 来延迟 JS 的执行，直到 HTML 文档加载完毕后（触发 window.onload 事件），再执行函数里的代码。

一般 script 标签会被放在头部或尾部。

头部就是 <head></head> 里面，尾部一般指 </body> 前，但也有放在 </body> 之后的（最好不要这样）！

6、getElementsByTagName()

getElementsByTagName() 方法的功能是通过标签名得到节点数组。

注意：得到的是一个数组

HTML

<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>

var ps = document.getElementsByTagName('p');

【注意事项】

数组方便遍历，从而可以批量操控元素节点。

即使页面上只有一个指定标签名的节点，也将得到长度为 1 的数组。

任何一个节点元素也可以调用 getElementsByTagName() 方法，从而得到其内部的某种标签名的元素节点。

7、getElementsByClassName()

getElementsByClassName() 方法的功能是通过类名得到节点数组。

HTML

<div class="spec">我是盒子</div>
<div>我是盒子</div>
<div class="spec">我是盒子</div>
<div class="spec">我是盒子</div>

var spec_divs = document.getElementsByClassName('spec');

【注意事项】

getElementsByClassName() 方法从 IE9 开始兼容。

某个节点元素也可以调用 getElementsByClassName() 方法，从而得到其内部的某类名的元素节点。

8、querySelector()

querySelector() 方法的功能是通过选择器得到元素。

HTML

<div id="box1">
	<p>我是段落</p>
    <p class="spec">我是段落</p>
    <p>我是段落</p>
</div>

var the_p = document.querySelector('#box1 .spec');

【注意事项】

querySelector() 方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素。

querySelector() 方法从 IE8 开始兼容，但从 IE9 开始支持 CSS3 的选择器，如：nth-child()、:[src^='dog'] 等 CSS3 选择器形式都支持良好。

（不能选择伪类！）

9、querySelectorAll()

querySelectorAll() 方法的功能是通过选择器得到元素数组。

即使页面上只有一个符合选择器的节点，也将得到长度为 1 的数组。

cx -

关注

18
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
了解document

任何一个节点元素也可以调用 getElementsByTagName() 方法，从而得到其内部的某种标签名的元素节点。某个节点元素也可以调用 getElementsByClassName() 方法，从而得到其内部的某类名的元素节点。querySelector() 方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素。所谓 “访问” 元素节点，就是指 “得到”、“获取” 页面上的元素节点。即使页面上只有一个指定标签名的节点，也将得到长度为 1 的数组。方法的功能是通过标签名得到节点数组。
复制链接

扫一扫