Dom中的基本组成被称为元素节点。
一、
节点的分类：1、元素节点 2文本节点 3属性节点。
获取元素：
1 document.getElementById（id）利用id来获取元素节点。（id是具有唯一性。返回的只有一个对象）
2 document.getElementsByTagName(tag)利用节点标签的名字来获取元素节点。（以对象数组形式输出，可用".length"来求取元素节点的个数。）
3 document.getElementsByClassName(class) 利用标签中class来获取元素节点。（以对象数组的形式输出可以使用".length"的方法来求取元素节点的个数。）
获取和设置属性
1 object（对象）.getAttribute(属性名)
2 object（对象）.setAttribute(属性名，改变的属性值)
上述讲解了关于js_Dom的基本操作，以下举例说明其具体用法。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>What do you want to by</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</lil>
</ul>
</body>
</htnl>
alert(document.getElementById("purchases"))
输出结果为：
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</lil>
</ul>
alert(document.getElementsByTagName("li"))
输出结果为：
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</lil>
alert(document.getElementsByClassName("sale"))
<li class="sale">Cheese</li>
<li class="sale important">Milk</lil>
alert(document.getElementsByTagName("p").getAttribute("title"))
输出结果为："a gentle reminder"。
document.getElementsByTagName("p").setAttribute("title","AAA")
alert(document.getElementsByTagName("p").getAttribute("title"))
输出结果为："AAA"
alert(document.getElementsByTagName("li").length)
输出结果为 3 .
alert(document.getElementsByClassName("sale"))
输出结果为 "sale" "sale important"
alert(document.getElementsByClassName("sale").length)
输出结果为 2 。
分享到：
相关推荐
React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前，让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...
听说你在找react-dom.development.js这个文件，在带走它前记得收藏加点赞、听说你在找react-dom.development.js这个文件，在带走它前记得收藏加点赞、听说你在找react-dom.development.js这个文件，在带走它前记得...
JavaScript-DOM编程艺术是关于如何使用JavaScript操作网页文档对象模型（Document Object Model，简称DOM）的技术。DOM是一种标准，它提供了表示和操作HTML或XML文档的接口。通过DOM，JavaScript可以访问和修改网页...
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
4. 服务器端渲染：react-dom.server模块支持在Node.js环境中进行服务器端渲染，提高首屏加载速度和SEO优化。 Babel是JavaScript的编译器，主要用于将ES6+的语法转换为浏览器可识别的ES5语法，确保代码在不同环境下...
韩顺平js-DOM学习笔记
`can-use-dom`是一个小巧而实用的前端开源库，它专门用于检测运行环境是否支持DOM操作，这对于跨平台的Web应用或者在非浏览器环境（如Node.js服务器端渲染）中进行前端开发至关重要。 首先，我们需要理解为什么在...
在React生态系统中，`react.min.js`和`react-dom.js`是两个核心库文件。 `react.min.js`是React库的压缩版本，"min"代表“最小化”，意味着它已经过混淆和压缩处理，以减少文件大小，提高网页加载速度。这个文件...
在这个名为“js-Dom”的压缩包中，我们很可能会找到关于JavaScript操作DOM的相关示例和教程。DOM是W3C标准的一部分，它将网页结构表示为一个树形结构，每个节点代表页面上的一个元素、属性或文本。 在JavaScript中...
在这个压缩包中，包含的三个关键文件——`react.development.js`, `babel.min.js`, 和 `react-dom.development.js`，都是React生态系统中的重要组成部分。 1. **react.development.js**: 这是React库的开发版本。在...
javaScript-DOM编程艺术实用.pdf
在JavaScript中，我们可以利用DOM API来创建、删除、修改或者查找这些节点，从而实现对网页内容的动态操作。 在这个"JavaScript-DOM实战案例"中，包含了两个主要的资源部分：`css`和`img`。 1. **CSS（Cascading ...
第三章：javascript-DOM对象模型-补充课件.ppt
5. **DOM**：解释DOM结构，如何通过JavaScript操作DOM节点，实现动态修改页面内容、事件监听等功能。 这些文档将对初学者和有一定经验的开发者都有所帮助，能够深入理解和应用这些技术，提高网页开发技能。由于是...
html-dom-parser 在服务器（Node.js）和客户端（浏览器）上均可使用HTML到DOM解析器： HTMLDOMParser(string[, options])解析器将HTML字符串转换为描述DOM树JavaScript对象。例子const parse = require ( '...
这个压缩包"js-dom-and-events-modifying-html-readme-v-000-源码.rar"包含的源码很可能是一系列关于使用JavaScript操作DOM和处理事件的示例。 **DOM基础** DOM是一个树形结构，其中每个节点代表HTML文档的一部分...
react-dom.js
2. **跨平台兼容性**: 作为一款前端开源库，html-dom-parser通常支持多种运行环境，包括浏览器环境和Node.js服务器环境。这使得开发者可以在客户端和服务器端都能进行HTML的解析和操作，实现前后端的数据同步和...