Web学习笔记（八）：JavaScript操作DOM对象_javascript操作dom对象笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43790325/article/details/107578114

本文详细介绍JavaScript操作DOM的各种方法，包括访问、创建、插入、删除、替换节点，以及节点属性、样式和元素属性的修改。通过实例展示如何使用getElement系列方法、style属性、className属性等进行DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript操作DOM对象

一、DOM概述

Document Object Model，即文档对象模型
DOM
- DOM Core
- CSS-DOM
- HTML-DOM
节点与节点的关系

二、访问节点

使用getElement系列方法访问指定节点
- getElementById() 通过id访问节点
- getElementsByName() 通过类名访问节点
- getElementsByTagName() 通过标签访问节点
根据层次关系访问节点
节点属性
- parentNode 返回节点的父节点
- childNodes 返回子节点集合，childNodes[i]
- firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
- lastChild 返回节点的最后一个子节点
- nextSibling 下一个节点
- previousSibling 上一个节点

三、element属性

firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="nodeList">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<script>
    var nodes = document.getElementById("nodeList");
    var node = nodes.firstElementChild;
    console.log(nodes);
    console.log(node);
</script>
</body>
</html>

四、节点信息

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
- 元素element 1
- 属性attr 2
- 文本text 3
- 注释comments 8
- 文档document 9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="请输入" id="a">
<script>
    var name = document.getElementById("a").nodeName;
    var value = document.getElementById("a").nodeValue;
    var type = document.getElementById("a").nodeType;
    console.log(name);
    console.log(value);
    console.log(type);
</script>
</body>
</html>

五、操作节点属性

getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>

<input value="OK">

<p id="demo">点击下面的按钮来设置按钮的类型属性。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); 
};
</script>
<p>Internet Explorer 8 及更早的版本不支持 setAttribute 方法。</p>

</body>
</html>

六、创建和插入节点

createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>

<p id="demo">单击按钮创建有文本的按钮</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var btn=document.createElement("BUTTON");
	var t=document.createTextNode("CLICK ME");
	btn.appendChild(t);
	document.body.appendChild(btn);
};

</script>

</body>
</html>

七、删除和替换节点

removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

八、style属性

语法：HTML元素.style.样式属性＝"值"

document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";

九、className属性

语法：HTML元素.className=“样式名称”

function over(){     
	document.getElementById("cart").className="cartOver";
	document.getElementById("cartList").className="cartListOver";
}

十、获取元素样式

语法：HTML元素.style.样式属性;
不支持IE浏览器

document.defaultView.getComputedStyle(元素,null).属性;
兼容IE浏览器

HTML元素. currentStyle.样式属性;

十一、HTML中元素属性

offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度

标准浏览器应用属性案例

document.documentElement.scrollTop; 
document.documentElement.scrollLeft;

Chrome应用属性案例

document.body.scrollTop; 
document.body.scrollLeft;