JavaScript操作DOM对象（节点信息、操作节点、style属性、获取元素样式）

最新推荐文章于 2022-04-24 01:19:12 发布

Marvellous丶

最新推荐文章于 2022-04-24 01:19:12 发布

阅读量3.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/93791002

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

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 用其他的节点替换指定的节点

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

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">单击按钮替换列表中的第一项。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var textnode=document.createTextNode("Water");
	var item=document.getElementById("myList").childNodes[0];
	item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p>
<p><strong>注意:</strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。</p>

</body>
</html>

运行结果：
在这里插入图片描述
点击后：

八、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;

Marvellous丶

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作DOM对象（节点信息、操作节点、style属性、获取元素样式）

JavaScript操作DOM对象一、DOM概述Document Object Model，即文档对象模型DOMDOM CoreCSS-DOMHTML-DOM节点与节点的关系二、访问节点使用getElement系列方法访问指定节点getElementById() 通过id访问节点getElementsByName() 通过类名访问节点getEl...
复制链接

扫一扫