首页 > 编程语言 >JavaScript第十讲:DOM编程(1):节点概念,如何获取元素节点,节点属性,样式

JavaScript第十讲:DOM编程(1):节点概念,如何获取元素节点,节点属性,样式

时间:2024-06-05 20:59:41浏览次数:29  
标签:JavaScript DOM 元素 var document 节点 属性

前言

在当今的Web开发中,DOM(Document Object Model)编程扮演着至关重要的角色。DOM是HTML和XML文档的编程接口,它使得我们可以像操作对象一样来操作网页上的元素。无论是构建动态网页,还是实现用户交互,都离不开对DOM的深入理解和灵活运用。在本文中,我们将开启DOM编程的系列学习之旅,首先聚焦于节点概念、如何获取元素节点、节点属性以及样式等基础知识。通过本文的学习,你将能够掌握DOM编程的基本技能,为后续更复杂的操作打下坚实的基础。已经学过的大佬们可以收藏当笔记看。

DOM 中的节点

在 DOM 中,HTML 文档被表示为一个树形结构,这个树形结构中的每一个部分都是一个节点。节点可以有不同类型,包括:

  1. 文档节点:代表整个文档,通常是 Document 对象。
  2. 元素节点:HTML 标签,如 <p><div> 等。
  3. 属性节点:HTML 标签的属性,如 <img src="example.jpg"> 中的 src 属性。
  4. 文本节点:元素节点之间的文本内容,如 <p>这是一段文本</p> 中的“这是一段文本”。
  5. 注释节点:HTML 注释,如 <!-- 这是一个注释 -->

DOM 节点示例代码

下面是一个简单的 HTML 文档,并配有 JavaScript 代码来演示如何访问 DOM 中的节点:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>DOM 节点示例</title>  
</head>  
<body>  
  
<div id="myDiv">  
    <p>Hello, <span>world!</span></p>  
    <!-- 这是一个注释 -->  
</div>  
  
<script>  
    // 获取文档节点(Document 对象)  
    var doc = document;  
  
    // 获取元素节点(通过 ID)  
    var myDiv = document.getElementById('myDiv');  
  
    // 获取元素节点中的文本节点(注意:直接获取不到,需要遍历子节点)  
    var childNodes = myDiv.childNodes;  
    for (var i = 0; i < childNodes.length; i++) {  
        if (childNodes[i].nodeType === Node.TEXT_NODE) {  
            console.log('文本节点内容:', childNodes[i].nodeValue.trim()); // 忽略前后空格  
        }  
    }  
  
    // 获取属性节点(通过元素节点的 attributes 属性)  
    var span = myDiv.querySelector('span');  
    var attributes = span.attributes;  
    for (var j = 0; j < attributes.length; j++) {  
        console.log('属性名:', attributes[j].name, '属性值:', attributes[j].value);  
        // 注意:实际上在 JavaScript 中我们很少直接操作属性节点,而是使用元素的属性名来访问和修改属性。  
    }  
  
    // 注释节点通常不被直接操作,但在遍历子节点时可能会遇到。  
</script>  
  
</body>  
</html>

Location 对象

Location 对象包含了关于当前 URL 的信息,并且允许您解析 URL 以及重定向浏览器到新的页面。它不是 DOM 树的一部分,但它是 window 对象的一个属性,因此可以通过 window.location 或简写为 location 来访问。

Location 对象示例代码

// 获取当前页面的 URL  
var currentUrl = window.location.href;  
console.log('当前 URL:', currentUrl);  
  
// 解析 URL 的各个部分  
var protocol = window.location.protocol; // "http:" 或 "https:"  
var hostname = window.location.hostname; // 域名,如 "example.com"  
var port = window.location.port; // 端口号,默认为空字符串  
var pathname = window.location.pathname; // 路径名,如 "/page.html"  
var search = window.location.search; // 查询字符串,如 "?key=value"  
var hash = window.location.hash; // URL 中的哈希部分,如 "#section"  
  
// 重定向到新的页面  
window.location.href = 'https://www.example.com'; // 这会导致浏览器跳转到新的 URL

如何获取元素节点

1. 通过id获取元素节点

在HTML中,每个元素都可以有一个唯一的id属性。在JavaScript中,我们可以使用document.getElementById()方法来获取具有特定id的元素。

<div id="myDiv">Hello, world!</div>  
  
<script>  
var elementById = document.getElementById('myDiv');  
console.log(elementById.innerHTML); // 输出 "Hello, world!"  
</script>

2. 通过标签名称获取元素节点

要获取具有特定标签名称的所有元素,可以使用document.getElementsByTagName()方法。

<p>Paragraph 1</p>  
<p>Paragraph 2</p>  
  
<script>  
var elementsByTagName = document.getElementsByTagName('p');  
for (var i = 0; i < elementsByTagName.length; i++) {  
    console.log(elementsByTagName[i].innerHTML);  
} // 分别输出 "Paragraph 1" 和 "Paragraph 2"  
</script>

3. 通过类名获取元素节点

使用document.getElementsByClassName()方法可以根据类名获取元素。

<div class="myClass">Div 1</div>  
<div class="myClass">Div 2</div>  
  
<script>  
var elementsByClassName = document.getElementsByClassName('myClass');  
for (var i = 0; i < elementsByClassName.length; i++) {  
    console.log(elementsByClassName[i].innerHTML);  
} // 分别输出 "Div 1" 和 "Div 2"  
</script>

4. 通过表单元素的name获取元素节点

在表单中,元素通常具有name属性。然而,直接使用name属性来获取元素并不像idtagNameclassName那样直接。但你可以使用document.getElementsByName()方法(注意:此方法在表单外的元素上可能不起作用)。

<form>  
    <input type="text" name="username">  
</form>  
  
<script>  
var inputElement = document.getElementsByName('username')[0]; // 注意可能返回多个元素,所以使用索引  
console.log(inputElement.value); // 输出输入框的值(如果已输入)  
</script>

5. 为什么会获取不到?

  • 拼写错误:确保你使用的id、类名、标签名或name与HTML中的实际值完全匹配。
  • DOM未完全加载:如果你的JavaScript代码在DOM完全加载之前运行(例如,在<head>标签中),你可能无法获取到某些元素。你可以将JavaScript代码放在<body>标签的底部,或者使用DOMContentLoaded事件来确保DOM已加载。
  • 选择器错误:如果你使用的是更复杂的选择器(如CSS选择器),你可能需要使用document.querySelector()document.querySelectorAll()方法。

6. 获取属性节点

属性节点可以通过元素的getAttribute()方法获取。

<img id="myImage" src="example.jpg" alt="My Image">  
  
<script>  
var imageElement = document.getElementById('myImage');  
var srcAttribute = imageElement.getAttribute('src');  
console.log(srcAttribute); // 输出 "example.jpg"  
</script>

7. 获取内容节点

元素的内容可以通过innerHTML(包括HTML标签)或textContent(仅文本内容)属性获取。

<div id="myContent">This is some <b>bold</b> text.</div>  
  
<script>  
var contentElement = document.getElementById('myContent');  
var innerHTMLContent = contentElement.innerHTML; // 包含HTML标签  
var textContent = contentElement.textContent; // 仅文本内容  
console.log(innerHTMLContent); // 输出 "This is some <b>bold</b> text."  
console.log(textContent); // 输出 "This is some bold text."  
</script>

节点属性

1. 节点名称 (NodeName)

节点的名称通常是大写的标签名(对于元素节点)或特定的字符串(对于其他类型的节点)。

<div id="myDiv">Hello, world!</div>  
  
<script>  
var element = document.getElementById('myDiv');  
console.log(element.nodeName); // 输出 "DIV"  
</script>

2. 节点值 (NodeValue)

节点值通常用于文本节点和属性节点。对于元素节点,它通常是nullundefined

<a href="https://example.com">Example Link</a>  
  
<script>  
// 文本节点的值  
var textNode = document.querySelector('a').firstChild;  
console.log(textNode.nodeValue); // 输出 "Example Link"  
  
// 属性节点的值  
var attrNode = document.querySelector('a').attributes.getNamedItem('href');  
console.log(attrNode.nodeValue); // 输出 "https://example.com"  
  
// 元素节点的值(通常是null或undefined)  
var element = document.querySelector('a');  
console.log(element.nodeValue); // 输出 null 或 undefined  
</script>

注意:在上面的例子中,firstChild可能会获取到空白文本节点(如果存在),所以你可能需要使用firstChild.nextSibling或其他方法来获取实际的文本节点。

3. 节点类型 (NodeType)

节点类型是一个数字常量,表示节点的类型(例如,元素节点、文本节点、属性节点等)。

<div id="myDiv">Hello, <span>world!</span></div>  
  
<script>  
var divElement = document.getElementById('myDiv');  
var spanElement = document.querySelector('span');  
var textNode = spanElement.firstChild;  
  
console.log(divElement.nodeType); // 输出 1,表示元素节点  
console.log(textNode.nodeType); // 输出 3,表示文本节点  
</script>
  • 1 代表元素节点
  • 2 代表属性节点(在DOM API中不常用,因为属性是通过其他方式访问的)
  • 3 代表文本节点

4. 元素的文本内容 (TextContent)

textContent 属性用于获取或设置元素及其后代的文本内容。

<div id="myDiv">Hello, <span>world!</span></div>  
  
<script>  
var element = document.getElementById('myDiv');  
console.log(element.textContent); // 输出 "Hello, world!"  
</script>

5. 元素上的属性 (Attributes)

元素节点上的属性可以通过 attributes 集合来访问。但更常见的是使用 getAttribute()setAttribute()removeAttribute() 方法来操作属性。

<img id="myImage" src="example.jpg" alt="My Image">  
  
<script>  
var imageElement = document.getElementById('myImage');  
  
// 获取属性  
var srcAttribute = imageElement.getAttribute('src');  
console.log(srcAttribute); // 输出 "example.jpg"  
  
// 设置属性  
imageElement.setAttribute('title', 'Click me!');  
  
// 移除属性  
imageElement.removeAttribute('alt');  
</script>

注意:虽然 attributes 集合提供了对元素属性的访问,但直接使用 getAttribute()setAttribute()removeAttribute() 方法更为常见和方便。

样式

1. 隐藏和显示元素

在JavaScript中,你可以通过修改元素的style.display属性来隐藏或显示一个元素。

隐藏元素
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Hide and Show Elements</title>  
</head>  
<body>  
  
<div id="myDiv">Hello, I'm a div!</div>  
  
<button onclick="hideDiv()">Hide Div</button>  
<button onclick="showDiv()">Show Div</button>  
  
<script>  
function hideDiv() {  
    var div = document.getElementById('myDiv');  
    div.style.display = 'none'; // 将display属性设置为'none'来隐藏元素  
}  
  
function showDiv() {  
    var div = document.getElementById('myDiv');  
    div.style.display = 'block'; // 将display属性设置为'block'来显示元素(假设元素是块级元素)  
    // 如果元素是内联元素,可以使用'inline'或其他合适的值  
}  
</script>  
  
</body>  
</html>
显示元素

在上面的例子中,showDiv函数将元素的display属性设置为'block',从而显示该元素。注意,如果元素是内联元素(如<span>),则应该使用'inline'或其他合适的值。

2. 改变背景色

你可以通过修改元素的style.backgroundColor属性来改变元素的背景色。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Change Background Color</title>  
</head>  
<body>  
  
<div id="myDiv" style="width: 200px; height: 200px;">Click the button to change color</div>  
  
<button onclick="changeColor()">Change Color</button>  
  
<script>  
function changeColor() {  
    var div = document.getElementById('myDiv');  
    div.style.backgroundColor = 'blue'; // 将背景色设置为'blue'  
    // 你可以将'blue'替换为任何有效的CSS颜色值,如'#ff0000'(红色)、'rgb(0, 255, 0)'(绿色)等  
}  
</script>  
  
</body>  
</html>

在上面的例子中,changeColor函数将元素的背景色更改为蓝色。你可以将'blue'替换为任何有效的CSS颜色值。

这些示例展示了如何使用JavaScript来动态地修改HTML元素的样式。在实际应用中,你还可以使用更复杂的CSS属性和值来创建更丰富的视觉效果和交互体验。

结语

通过本文的学习,我们对DOM编程的节点概念、获取元素节点的方法、节点属性以及样式操作有了初步的了解。这些基础知识是后续深入学习DOM编程的基石,也是我们实现动态网页和用户交互的必备技能。当然,DOM编程的世界远不止于此,还有许多高级特性和技术等待我们去探索和实践。希望本文能够为你打开DOM编程的大门,激发你对Web开发的兴趣和热情。在未来的学习和实践中,不断挑战自我,探索未知,让我们一起在Web开发的道路上不断前行。

respect!

标签:JavaScript,DOM,元素,var,document,节点,属性
From: https://blog.csdn.net/2303_80856850/article/details/139481678

相关文章

  • 【华为OD】D卷真题200分:会议接待 JavaScript代码实现[思路+代码]
    【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客JS、python、Java、C、C++代码实现:【华为OD】D卷真题200分:会议接待JavaScript代码实现[思路+代码]-CSDN......
  • JavaScript-匿名函数
    原文链接:https://blog.csdn.net/weixin_45203607/article/details/124227504什么是匿名函数1、匿名函数,即没有名称的函数2、如果单独只写一个匿名函数,此时是不符合语法要求的会报错。需要给匿名函数包裹一个括号,使之成为表达式。3、被小括号包裹的内容会被js识别为一个函数表......
  • javaScript高级23_事件4
    一、概念某些组件被执行了某些操作后,触发某些代码的执行。事件:某些操作。如:单击,双击,键盘按下了,鼠标移动了事件源:组件。如:按钮文本输入框...监听器:代码。注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。二、常见的事件......
  • 【JS】JavaScript编程语言-谷歌浏览器调试之前端代码(2024-06-05)
    1、在浏览器中调试调试是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具——开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码以查看当前实际运行情况。在这里我们将会使用Chrome(谷歌浏览器)。2......
  • 【华为OD】D卷真题100分:高矮个子排队 JavaScript代码实现[思路+代码]
    【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客JS、C、python、Java、C++代码实现:【华为OD】D卷真题100分:高矮个子排队JavaScript代码实现[思路+代码]-C......
  • 代码随想录算法训练营第四天 |节点交换、删除倒数n个节点、交叉链表、环形链表
    24题目链接:https://leetcode.cn/problems/swap-nodes-in-pairs/description/24题代码随想录讲解:https://programmercarl.com/0024.两两交换链表中的节点.html#思路19题链接:https://leetcode.cn/problems/remove-nth-node-from-end-of-list/19题代码随想录:https://programmerca......
  • CF1743D Problem with Random Tests
    题目链接:https://codeforces.com/contest/1743/problem/D这题比较考察做题的经验因为或操作对一个数的值只增不减,所以我们要往高位考虑.我们截取的第一段需要满足最高位的1在原串中也是最高位的1,这样才能做到别的所有的数都不如他大.截取的第二段需要能首先满足把第一段截取......
  • Analysis the domain name of Baidu
    /**********************************************************************************************************filename:hw.c*author:[email protected]*data:2024/06/04*function:设计程序实现解析www.baidu.com的域名,把获取到的百度......
  • JavaScript省市区县选择三级联动实现
    <!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <style>  .select-container{   margin:20pxauto;   width:610px;  }  select{   width:200px;   height:25px;  ......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站(甜品)
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......