JavaScript - 获取页面元素的四种方法

测试源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2 id="header">前端开发学习</h2>
<ul class="list">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

1.用标签名来获取元素- document.getElementByTagName

获取页面中全部的 li 元素 (参数为标签名)

以数组形式保存

访问元素内容

修改元素内容

2.用元素 id 来获取 - document.getElementById (参数为id内容)

以文本形式保存

访问元素内容

修改元素内容

3.用 class 类名来获取元素 - document.getElementsByClassName

返回一个数组,类属性list进行修饰的一个对象

参数为clss属性值

访问元素内容

4.用 CSS 选择符来获取 - document.querySelector 

                        - document.querySelectorAll

document.querySelector 只能获取一个元素内容

使用 querySelectorAll 可获取多个内容

访问元素内容

修改元素内容

猜你喜欢

转载自blog.csdn.net/Qjy_985211/article/details/83899248