• DOM—节点操作

    节点属性

    属性名称

    描述

    parentNode

    返回节点的父节点

    childNodes

    返回子节点集合，childNodes[i]

    firstChild

    返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

    lastChild

    返回节点的最后一个子节点

    nextSibling

    下一个节点

    previousSibling

    上一个节点

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<h2>2级标题标签h2>
    9. 		<p>段落标签p>
    10. 		<ul>
    11. 			<li>无序列表第1项li>
    12. 			<li id="test">无序列表第2项li>
    13. 			<li>无序列表第3项li>
    14. 			<li>无序列表第4项li>
    15. 		ul>
    16. 	body>
    17. 	<script>
    18. 		//获取id属性值为test的标签元素
    19. 		// var liEle = document.getElementById("test");
    20. 		// console.log(liEle);
    21.  
    22. 		var liEle=document.getElementById("test");
    23. 		console.log(liEle);
    24.  
    25. 		//获取父节点
    26. 		var ulEle=liEle.parentNode;
    27. 		console.log(ulEle);
    28. 		
    29. 		//获取子节点(子节点中包含元素之间的空格换行)
    30. 		var ulElement=document.querySelector("ul");
    31. 		var liEles=ulElement.childNodes;
    32. 		console.log(liEles);
    33.  
    34. 		//第一个/最后一个节点
    35. 		console.log(ulElement.firstChild);
    36. 		console.log(ulElement.lastChild);
    37.  
    38.  
    39. 		//上一个/下一个节点
    40. 		console.log(liEle.previousSibling);
    41. 		console.log(liEle.nextSibling);
    42.  
    43. 	script>
    44. html>

    Element属性

    属性名称

    描述

        firstElementChild

    返回节点的第一个子节点

    lastElementChild

    返回节点的最后一个子节点

    nextElementSibling

    下一个节点

    previousElementSibling

    上一个节点

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<h2>2级标题标签h2>
    9. 		<p>段落标签p>
    10. 		<ul>
    11. 			<li>无序列表第1项li>
    12. 			<li id="test">无序列表第2项li>
    13. 			<li>无序列表第3项li>
    14. 			<li>无序列表第4项li>
    15. 		ul>
    16. 	body>
    17. 	<script>
    18.  
    19. 		//第一个/最后一个元素（选择时不会包含空格换行）
    20. 		var ulEle = document.querySelector("ul");
    21. 		console.log(ulEle.firstElementChild);
    22. 		console.log(ulEle.lastElementChild);
    23. 		//上一个/下一个元素
    24. 		var liEle = document.querySelector("#test");
    25. 		console.log(liEle.previousElementSibling);
    26. 		console.log(liEle.nextElementSibling)
    27. 		
    28. 		//节点信息
    29. 		console.log(ulEle.nodeName)
    30. 		console.log(ulEle.nodeType)
    31. 		console.log(document.nodeType)
    32. 	script>
    33. html>

    节点信息

    nodeName：节点名称

    nodeValue：节点值

    nodeType：节点类型

    节点类型

    NodeType值

         元素element

    1

    属性attr 

      2

    文本text

     3

    注释comments

     8

       文档document

     9

    操作节点属性

    设置属性：

            setAttribute()方法添加指定的属性，并为其赋指定的值

    获取属性：

            getAttribute() 方法返回指定属性名的属性值

    JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
    pdf 0星 超过10%的资源 62KB
    下载

    删除属性：

            removeAttribute() 方法删除指定的属性

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>操作节点属性title>
    6. 	head>
    7. 	<body>
    8. 		<img src="st.png" title="帅哥"  width="500px"/><br />
    9. 		<button onclick="get()">获取图片路径button>
    10. 		<button onclick="changeImg()">修改图片button>
    11. 		<button onclick="deleteTitle()">删除图片属性button>
    12. 	body>
    13. 	<script>
    14. 		//获取img标签
    15. 		var imgEle = document.querySelector("img");
    16. 		console.log(imgEle.src);
    17. 		
    18. 		function get(){
    19. 			var imgSrc=imgEle.getAttribute("src");
    20. 			console.log(imgSrc);
    21. 		}
    22. 		
    23. 		function changeImg(){
    24. 			imgEle.setAttribute("src","ch.png");
    25. 		}
    26. 		
    27. 		function deleteTitle(){
    28. 			imgEle.removeAttribute("title");
    29. 		}
    30. 		
    31. 	script>
    32. html>

    创建&插入

    名称

    描述

         document.createElement(“元素名”)

    创建元素节点

    document.createTextNode(“文本”)

      创建文本节点

    A.appendChild( B)

     把B节点追加至A节点的末尾

    insertBefore( A,B )

     把A节点插入到B节点之前

                    cloneNode(deep)

     复制某个指定的节点

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<ul>ul>
    9. 	body>
    10. 	<script>
    11. 		// 创建li元素
    12. 		var liEle=document.createElement("li");
    13. 		console.log(liEle);
    14.  
    15. 		//创建文本节点
    16. 		var textNode=document.createTextNode("无序列表第一项");
    17. 		console.log(textNode);
    18. 		liEle .appendChild(textNode);
    19. 			
    20. 		//创建了li并且li中添加了内容，接下来将闯将li元素添加到ul
    21. 		var ulEle = document.querySelector("ul");
    22. 		ulEle.appendChild(liEle);
    23. 		console.log(ulEle);		
    24. 	script>
    25. html>

     删除&替换

    名称

    描述

         父节点.removeChild( 子节点)

    删除指定的节点

    父节点.replaceChild( newNode, oldNode) 

     用其他的节点替换指定的节点

     style属性

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

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

    className属性

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

    1. function over(){
    2.      document.getElementById("cart").className="cartOver";
    3.      document.getElementById("cartList").className="cartListOver";
    4.      }
    5. function out(){
    6.      document.getElementById("cart").className="cartOut";
    7.      document.getElementById("cartList").className="cartListOut";
    8.      }

  • 相关阅读:
    flutter在mac系统中的环境搭建 - 1
    京东二面：Sychronized的锁升级过程是怎样的
    Java Design Patterns 之 抽象工厂模式 02
    WPF界面设计工具---Blend学习（一）
    案例｜美创科技守护健康“一盘棋”，医共体整体数据安全建设实践
    3.2-JZ39 数组中出现次数超过一半的数字
    springboot+jsp商城会员积分管理系统
    xshell使用vi命令：bash：vim：command not found
    pycharm 让控制台里的链接可以点击
    springboot+学生信息管理 毕业设计-附源码191219
  • 原文地址：https://blog.csdn.net/qq_69761234/article/details/126316840