JavaScript DOM操作：查找元素详解

40 浏览量更新于2024-08-30 收藏 145KB PDF 举报

"这篇教程主要探讨JavaScript中的DOM对象，即文档对象模型，它是浏览器提供的一套API接口，用于处理和操作HTML或XML文档。DOM允许JavaScript与网页内容进行交互，实现动态网页效果。W3C推荐的DOM标准在不同浏览器间存在差异，尽管Mozilla浏览器最接近标准。DOM不是JavaScript语言本身的一部分，而是浏览器实现的一部分，它连接了网页内容和脚本语言。本文将详细介绍如何使用DOM来查找和操作页面元素。在DOM中查找元素是基本的操作，主要有以下几种方法： 1. 通过ID查找：`getElementById(id)` 是最直接的方法，它返回文档中具有指定ID属性的唯一元素。例如： ```html <body> <div id="zhang">不帅</div> </body> <script type="text/javascript"> var i = document.getElementById('zhang'); // 获取id为'zhang'的元素 i.innerText = '很帅'; // 修改元素的文本内容 </script> ``` 运行这段代码后，`<div>` 的内容会从"不帅"变为"很帅"。 2. 通过标签名查找：`getElementsByTagName(name)` 返回当前元素中所有具有指定标签名的子元素数组。例如： ```html <body> <div name="zhang">不帅</div> </body> <script type="text/javascript"> var i = document.getElementsByTagName('div')[0]; // 获取第一个'div'元素 i.innerText = '很帅'; // 修改元素的文本内容 </script> ``` 这段代码也会将`<div>`的内容更改为"很帅"。 3. 通过类名查找：`getElementsByClassName(name)` 根据指定的类名返回一个包含匹配元素的集合。例如： ```html <body> <div class="zhang">不帅</div> </body> <script type="text/javascript"> var elements = document.getElementsByClassName('zhang'); // 获取所有类名为'zhang'的元素 elements[0].innerText = '很帅'; // 修改第一个匹配元素的文本内容 </script> ``` 同样，这会将类名为"zhang"的`<div>`内容更改为"很帅"。 DOM操作还包括设置和获取元素属性。例如，使用`getAttribute(name)` 可以获取元素的属性值，如： ```javascript var attrValue = element.getAttribute('attributeName'); ``` 而`setAttribute(name, value)` 可以设置元素的属性值： ```javascript element.setAttribute('attributeName', 'newValue'); ``` DOM对象是JavaScript在网页动态化中的关键工具，通过它我们可以查找、创建、修改和删除HTML元素，实现丰富的交互效果。掌握DOM操作对于前端开发至关重要，因为它使得JavaScript能够与网页内容进行动态交互，创建出响应用户行为的动态网页。

attributes // 获取所有标签属性

setAttribute(key,value) // 设置标签属性

getAttribute(key) // 获取指定标签属性

通过自定义属性可以做一个全选，反选，取消选择的案例，代码如下：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<div>

</div>

<ul>

</ul>

</div>

function Checkall() {

var b = document.getElementsByClassName("c1");

for (var i = 0 ;i < b.length;i++){

var check = b[i];

check.checked = true

}

function Cancleall() {

var b = document.getElementsByClassName("c1");

for (var i = 0 ;i < b.length;i++){

var check = b[i];

check.checked = false

}

function recvall() {

var b = document.getElementsByClassName("c1");

for (var i = 0 ;i < b.length;i++){

var check = b[i];

if (check.checked){

check.checked = false

}else {

check.checked = true

}

</script>

</body>

</html>

全选、反选、取消案例

注：onclick是属于点击事件，后面会提到

4、class操作

className // 获取所有类名

classList.remove(cls) // 删除指定类

classList.add(cls) // 添加类

这个东西的用处很大，比如京东里面，当我们鼠标放到全部商品的时候，下面就出现好多商品，其商品是属于隐藏的，触发事件

以后他才显示出来，其中间的操作就是定义了一个css隐藏属性，鼠标放上去后，移除CSS隐藏属性；鼠标移走又把隐藏属性给

添加上去。

<!DOCTYPE html>

<html>

<style>

.hide{

display: none;

剩余12页未读，继续阅读

weixin_38677255

粉丝: 6
资源: 929

JavaScript DOM操作：查找元素详解

JavaScript DOM编程艺术【第2版&高清】.pdf

JavaScript DOM编程艺术(第2版pdf)+源代码

深入理解JavaScript DOM对象与浏览器信息获取

JavaScript DOM事件深入解析

深入理解JavaScript DOM操作与对象模型

javascriptDOM

"2022 JavaScript-HTMLDOM对象深入解析与应用指南

深入理解JavaScript DOM操作技巧

深入理解JavaScript DOM操作与应用

深入理解JavaScript DOM编程与实践

最新资源