雀雀JavaScript操作节点

最新推荐文章于 2024-10-14 21:43:50 发布

雀雀coder

最新推荐文章于 2024-10-14 21:43:50 发布

阅读量351

点赞数

分类专栏：雀雀学JavaScript基础篇

本文链接：https://blog.youkuaiyun.com/weixin_41873431/article/details/80038270

版权

雀雀学JavaScript基础篇专栏收录该内容

6 篇文章

订阅专栏

本文介绍JavaScript操作DOM节点的方法，包括属性操作、节点创建与插入、删除与替换等基本技巧，并展示了如何通过事件监听来实现节点样式的动态变化。

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

JavaScript操作节点

2018年4月22日星期日

节点的属性

previousSibling 属性返回同一树层级中指定节点的前一个节点。

被返回的节点以 Node 对象的形式返回。

注释：如果没有 previousSibling 节点，则返回值是 null。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>访问节点</title>
 <link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
 <header>京东快报 <a href="#">更多</a></header>
 <ul>
 <li>
 <a href="#">新闻头条No1</a>
 </li>
 <li>
 <a href="#">新闻头条No2</a>
 </li>
 <li>
 <a href="#">新闻头条No3</a>
 </li>
 <li>
 <a href="#">新闻头条No4</a>
 </li>
 </ul>
</section>

<script>

 var sec = document.getElementById("news");
 var le = sec.childNodes.length;
 var str = sec.lastChild.previousSibling; //取得最后一个节点
// str = str.innerHTML;
 var str2 = str.nextElementSibling || str.nextSibling;

 alert(le);
 alert(str2);

</script>
</body>
</html>

节点信息

nodeName	节点名称
nodeValue	节点值
nodeType	节点类型

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>节点信息</title>
</head>
<body>
<ul id="nodeList">
 <li>nodeName</li>
 <li>nodeValue</li>
 <li>nodeType</li>
</ul>

<script>
 var nodes = document.getElementById("nodeList");
 var type = nodes.firstChild.nodeType;
 var name = nodes.firstChild.nodeName;
 var str = nodes.firstChild.nodeValue;
 document.getElementsByTagName("p")[0].innerHTML = "type1-" + type1+" "
 +"name-" + name +" "+"Value-" + str;
</script>
</body>
</html>

操作节点一

getElementsByName(节点名); 通过这种方式取得节点对象
getElementById (节点名); 通过这种方式取得节点对象

设置节点

对象名. setAttribute("节点名","要设置的值")；

示例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>选择你喜欢的书</title>
 <style>
 * {
 font-size: 12px;
 font-family: "Arial", "微软雅黑";
 line-height: 25px;
 }

 div {
 padding: 5px;
 text-align: center;
 }

 div span {
 display: block;
 }
 </style>
</head>
<body>
选择你喜欢的书：<input type="radio" name="book" οnclick="book()">我和狗狗一起活下来
 <input type="radio" name="book" οnclick="book()">灰霾来了怎么办

<div><img src="" alt="" id="image" οnclick="img()"><span></span></div>
<script>

 function book() {
 var ele = document.getElementsByName("book");
 var img = document.getElementById("image");

 if (ele[0].checked){
 img.setAttribute("src","images/dog.jpg");
 img.setAttribute("alt","我的狗狗一起活下来");
 img.nextElementSibling.innerHTML = "我和狗狗一起活下来";

; }else if (ele[1].checked){
 img.setAttribute("src","images/mai.jpg");
 img.setAttribute("alt","灰霾来了怎么办")
// img.nextSibling.innerHTML="灰霾来了怎么办";
 img.nextSibling.innerHTML = "灰霾来了怎么办";
 }
 }
 function img() {
 var img = document.getElementById("image");

 alert(img.getAttribute("alt") + img.getAttribute("src"));
 }
</script>
</body>
</html>

操作节点二

document.createElement("节点名称"); 创建一个节点

cloneNode() 创建节点的拷贝，并返回该副本。如果参数是true 则克隆所有有关这个节点的后代

insertBefore()在指定的已有子节点之前插入新的子节点

示例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>选择你喜欢的书</title>
 <style>
 *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
 div{padding: 5px; text-align: center;
 }
 div span{display: block;}
 </style>
</head>
<body>
选择你喜欢的书：<input type="radio" name="book" οnclick="book()">我和狗狗一起活下来
 <input type="radio" name="book" οnclick="book()">灰霾来了怎么办
<div></div>
<script>
 function book() {
 //取得name为book的对象
 var ele = document.getElementsByName("book");
 //取得div的第0个元素
 var domDiv = document.getElementsByTagName("div")[0];

 if (ele[0].checked){
 //创建一个节点
 var img = document.createElement("img");
 //给这个节点设置src的内容
 img.setAttribute("src","images/dog.jpg");
 //给div添加这个节点
 domDiv.appendChild(img);
 }if(ele[1].checked){
 var img = document.createElement("img");
 img.setAttribute("src","images/mai.jpg");
 img.setAttribute("onclick","copyNode()");
 domDiv.appendChild(img);
 }
 }

 function copyNode() {
 //取得第1个节点元素
 var domDiv = document.getElementsByTagName("div")[0];
 //cloneNode() 创建节点的拷贝，并返回该副本。如果参数是true 则克隆所有有关这个节点的后代
 var newDom = domDiv.lastChild.cloneNode(false);
 //insertBefore()在指定的已有子节点之前插入新的子节点
 domDiv.insertBefore(newDom,domDiv.firstChild);
 }
</script>
</body>
</html>

操作节点三

parentNode属性以 Node 对象的形式返回指定节点的父节点。

removeChild() 删除某个节点元素

replaceChild (新的节点,旧的节点) 替换某个节点元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>替换和删除节点</title>
</head>
<body>
<ul>
 <li>
 <img src="images/f01.jpg" id="first">
 <input type="button" value="删除我吧" οnclick="del()">
 </li>
 <li>
 <img src="images/f02.jpg" id="second">
 <input type="button" value="换换我吧" οnclick="rep()">
 </li>
</ul>
<script>
 function del() {
 //取得Id为first的节点元素
 var oldNode = document.getElementById("first");
 //parentNode属性以 Node 对象的形式返回指定节点的父节点。
 //removeChild() 删除某个节点元素
 oldNode.parentNode.removeChild(oldNode);
 }

 function rep() {
 var oldNode = document.getElementById("second");
 var newNode = document.createElement("img");
 newNode.setAttribute("src","images/f03.jpg");
 //replaceChild (新的节点,旧的节点) 替换某个节点元素
 oldNode.parentNode.replaceChild(newNode,oldNode);
 }
</script>
</body>
</html>

操作节点四

onmouseover 鼠标悬浮事件

onmouseout 鼠标移开事件

className 取得样式改变

document.defaultView.getComputedStyle(对象名,null).background 大部分的浏览器能够支持的取得元素样式的方式

对象名.currentStyle.background; 兼容IE的取得元素样式的方法

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>鼠标悬浮事件Demo</title>
 <link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<section id="shopping">
 <div id="cart" οnmοuseοver="over()" οnmοuseοut="out()">我的购物车<span>1</span></div>
 <div id="cartList">
 <h2>最新加入的商品</h2>
 <ul>
 <li><img src="images/makeup.jpg"></li>
 <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
 <li>¥558.00×1 删除</li>
 </ul>
 <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
 </div>
</section>
<script>
 /**
 * 鼠标悬浮事件
 */
 var cart = document.getElementById("cart");
 var cartList = document.getElementById("cartList");
 function over() {
 /*改变样式
 cart.style.background = "#ffffff";
 cart.style.zIndex = "100";
 cart.style.borderBottom = "none";
 cartList.style.display = "block";
 cartList.style.position = "relative";
 cartList.style.top = "-1px";
 */
 cart.className = "cartOver";
 cartList.className = "cartListOver";
 }
 /**
 * 鼠标移开事件
 */
 function out() {
 cart.className = "cartOut";
 cartList.className = "cartListOut";

 /*改变样式
 cart.style.background = "#f9f9f9";
 cart.style.borderBottom = "solid 1px #dcdcdc";
 cartList.style.display = "none";
 */
 }

     alert(document.defaultView.getComputedStyle(cartList,null).background);
     alert(cartList.currentStyle.background);
  </script>
  
  </body>
  </html>