dom树的操作_说明清楚如何利用dom树获得实验完成的对话框中的相关信息的方法-CSDN博客

本文链接：https://blog.csdn.net/HeartCSDN/article/details/103834855

dom树的操作
DOM节点的获取
DOM节点的获取方式其实就是获取事件源的方式

操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom</title>
</head>
<body><div id="box01">
	<div class = "box1">
		<p>
			<i>今天武汉下雨了</i>
		</p>
		<a>今天天气不太好</a>
	</div>
	
	<div class="div1">
		<div></div>
	</div>
	</div>
	<script>
   var div1 = document.getElementById("box01");      //方式一：通过id获取单个标签

    var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 到的是标签数组，所以有s

    var arr2 = document.getElementsByClassName("div1");  //方式三：通过 类名 获得 到的是标签数组，所以有s
//既然方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。

//特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：

    document.getElementsByTagName("div")[0];    //取数组中的第一个元素

    document.getElementsByClassName("div1")[0];  //取数组中的第一个元素
	</script>
</body>
</html>
    
//获取父节点
//调用者就是节点。一个节点只有一个父节点，调用方式就是

 //   节点.parentNode
//语法为（1）nextSibling：

   //  指的是下一个节点（包括标签、空文档和换行节点）
 
   //（2）nextElementSibling：
   //指的是下一个元素节点（标签）。
        // 1.previousSibling   获取的的是前一个节点，包括标签、空文档和换行节点；
       //  2.previousElementSibling    获取的是都指的是前一个元素节点即标签；
 //前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
 
   // 节点自己.parentNode.children[index];  //随意得到兄弟节点
  // 获取所有的子节点
//（3）childNodes：标准属性。返回的是指定元素的子节点的集合，包括元素节点、所有属性、文本节点。