JavaScript DOM（二）查

2023-11-16

书接上回

节点

DOM中有许多不同类型的节点。接下来我们先看看其中的三种：元素节点，文本节点和属性节点。

元素节点：指该html里面标签的名字就是元素的名字。例如我们使用的<P>,·<ul>和<div>之类的元素，p标签的名字是"p"，无序列表的名字就是"ul"。

文本节点：元素节点是结构，文本节点则是内容。例如: <p>里面包含的文本"HOOOOOO"，它就是一个文本节点。

属性节点：属性节点对元素做出更具体的描述。（指该元素的属性）
例如：<p title="a">111111</p>
在DOM中，title…就是一个属性节点。

获取元素（查询元素）结合

不需要查找就可直接获得的元素: 4种
(1). document对象: document —— 代表整个网页所有内容
(2). 元素对象: document.documentElement
(3). 元素对象: document.head
(4). 元素对象: document.body

例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html元素对象</title>
</head>
<body>
 <span id="aaaa">Hello</span>
<script>
/想输出document对象
    console.log(document);
    //想输出html元素对象
    console.log(document.documentElement);
    //想输出head元素对象
    console.log(document.head);
    //想输出body元素对象
    console.log(document.body);
</script>
</body>

2.DOM方法可获取元素节点
通过元素ID： getElementById（JavaScript语言区分字母大小写，千万不能写错了，或者大小写写错）
它是document对象特有的类型。在代码中，函数名的后面必须跟有一对圆括号，这对圆括号包含着函数的参数。getElementById方法中只有一个参数：

document.getElementById(“id名”)

var 一个元素对象=document.getElementById(“id名”)

这个id值必须放在单引号或双引号里
必须用document.作为开头
所有元素不查找，是不能直接使用！
要想使用某个元素，都必须先查找再使用
想查找ul下的所有li
如果网页中确实有多个相同的id，则getElementById()永远只能找第一个符合条件的。

<!DOCTYPE HTML>
<html>
	<head>
		<title>遍历节点树</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<ul id="nav">
			<li>小说</li>
			<li>漫画</li>
			<li>影视</li>
		</ul>	
    <script>
			var ul=document.getElementById("nav");
			console.log(ul);
			//获取id为nav的ul节点
			//如果找到符合条件的一个元素，就返回一个元素对象
			//如果没找到符合条件的元素，就返回null
		</script>
	</body>
</html>

通过标签名字： getElementsByTagName
该方法返回一个对象数组，每个对象分别对应着文档里面有着给定标签的一个元素。这个方法他的参数是标签的名字。在指定父元素下以标签名为查找条件获取多个元素

var 类数组对象=任意父元素.getElementsByTagName(“标签名”)

document.getElementsByTagName(“标签名”)

i. 如果找到符合条件的多个元素，则多个元素放在一个类数组对象中返回
ii. 如果找不到符合条件的元素，则返回空类数组对象: { length:0 }
i. 不一定必须用document作为开头。可以用任意父元素作为开头！仅在当前父元素下查找符合条件的元素。
限制查找范围，提高查找效率
因为可能返回多个符合要求的子元素，所以方法名中Elements是s结尾，复数形式。
不但查找直接子元素，而且在所有后代中查找符合要求的元素

<!DOCTYPE HTML>
<html>
	<head>
		<title>遍历节点树</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h1>qwer</h1>
		<p style="color: #DCDCDC">ewqweqr</p>
		<ul id="purchases">
			<li>1</li>
			<li class="li2">2</li>
			<li class="li3 ads">3</li>
		</ul>
    	<script>
			alert(document.getElementsByTagName("li").length);
			//实例中列表项元素有3个，长度就是3
			var items = document.getElementsByTagName("li");
			console.log(items);
			获得li节点和li的属性....
		</script>
	</body>
</html>

通过标签的class属性中的类名来访问元素：getElementsByClassName

var 类数组对象=任意父元素.getElementsByClassName(“class名”)

document.getElementsByClassName(class名)
只能接受一个参数，就是类名
果找到符合条件的多个元素，则多个元素放在一个类数组对象中返回
如果找不到符合条件的元素，则返回空类数组对象: { length:0 }
可以用任意父元素作为开头！仅在当前父元素下查找符合条件的元素。
限制查找范围，提高查找效率
方法名中Elements是s结尾，复数形式。
在所有后代中查找符合要求的元素
如果只找到一个元素，也必须加[0]，才能取出这唯一的DOM元素对象
例：var 类数组对象=任意父元素.getElementsByClassName(“class名”)[0];
如果一个元素上同时被多个class修饰，那么只用其中一个class名就可找到该元素。

<!DOCTYPE HTML>
<html>
	<head>
		<title>遍历节点树</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h1>qwer</h1>
		<p style="color: #DCDCDC">2020</p>
		<ul id="purchases">
			<li>1</li>
			<li class="l1">2</li>
			<li class="l1">3</li>
		</ul>
    	<script>
			alert(document.getElementsByClassName("l1").length);
			//只要有一个元素带有l1，就有一个元素匹配
			var items = document.getElementsByClassName("l1");
			console.log(items);
			//获取class名为l1的节点...
		</script>
	</body>
</html>

通过标签的name属性查找多个表单元素: getElementsByName
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性。

var 类数组对象=document.getElementsByName(“name名”)

document.getElementsByName(“name名”)

因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
如果找不到符合条件的元素，则返回空类数组对象: { length:0 }
必须用document.作为开头！不能以任意父元素开头！
必须用document.作为开头！不能以任意父元素开头！
必须用document.作为开头！不能以任意父元素开头！
方法名中Elements是s结尾，复数形式。
如果只找到一个元素，也必须加[0]，才能取出这唯一的DOM元素对象

<!DOCTYPE HTML>
<html>
	<head>
		<title>遍历节点树</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		用户名: <input type="text" name="uname"><br/>
		性别: 
		<label>
			<input type="radio" name="sex" value="1">男
		</label>
		<label>
			<input type="radio" name="sex" value="0">女
		</label>
    	<script>
			//想查找name为sex的两个元素
			var radios=document.getElementsByName("sex");
			console.log(radios);   //....
			//想查找name为uname的一个文本框
			var txtUname=document.getElementsByName("uname")[0];
			console.log(txtUname);  //...
		</script>
	</body>
</html>

3. 利用节点树查找节点:
     获得一个DOM元素，想找它周围附近的其它DOM元素时，就用按节点间关系查找
  但是因为节点树认为连看不见的换行和空格，也是文本类型的节点对象。也会成为子节点和兄弟节点。所以它会严重干扰我们的查找结果。
  对此的解决方法就是换成元素节点查询。一般分别成为节点树和元素树。

a. 节点树: 包含所有节点对象(元素、文本等)的完整树结构
b. 元素树: 仅包含元素节点，不包含文本等其他类型节点的简化版树结构

通过节点树
按照父子关系（上一级和下一级）:
获得一个节点对象的父节点: document.节点对象.parentNode;

获得一个节点对象下的所有直接子节点对象: document.节点对象.childNodes;

获得一个节点对象下的第一个直接子节点: document.节点对象.firstChild;

获得一个节点对象下的最后一个直接子节点: document.节点对象.lastChild;

兄弟关系: 2个属性：

获得当前节点对象相邻的前一个兄弟节点: 节点对象.previousSibling

获得当前节点对象相邻的下一个兄弟节点: 节点对象.nextSibling

<!DOCTYPE HTML>
<html>
<head>
  <title>DOM Tree</title>
  <meta charset="utf-8" />
</head>
<body>
  <span id="s1">Hello</span>
  <h1>标题一</h1>
  <script>

   var childNodes=document.body.childNodes;
    console.log(childNodes);

	var span=document.body.firstChild;
    console.log(span);

    var script=document.body.lastChild;
    console.log(script);

    var h1=document.body.children[1];
    console.log(h1);

    var h1=span.nextSibling;
    console.log(h1);

    var h1=script.previousSibling;
    console.log(h1);
  </script>
</body>

对于元素间的空格，也会导致了在使用childNodes和firstChild等属性时的行为不一致。

所以按节点间关系查找时，都用元素树，而不用节点树

**
通过元素树
强调：元素树只是节点树中的部分元素节点的一个子集。
父子元素：
获得一个元素对象的父元素: 元素对象.parentElement

获得一个元素对象下的所有直接子元素: 元素对象.children

因为一个元素可能包含多个子元素，所以children属性返回一个类数组对象，其中包含找到的所有直接子元素对象。下标从0开始！

获得一个元素对象下的第一个直接子元素: 元素对象.firstElementChild

获得一个元素对象下的最后一个直接子元素: 元素对象.lastElementChild

    兄弟关系: 2个属性：

   获得当前元素对象相邻的前一个兄弟元素: 元素对象.previousElementSibling

获得当前元素对象相邻的下一个兄弟元素: 元素对象.nextElementSibling

 结合本例子学习
<!DOCTYPE HTML>
<html>

<head>
  <title>DOM Tree</title>
  <meta charset="utf-8" />
</head>

<body>
  <span id="sp">CSDN</span>
  <h1>JavaScript DOM</h1>
  <script>
    //想获得body的父节点: 应该是<html>
    //既可以用parentNode，又可以用parentElement
    var html=document.body.parentNode;//首选
    //var html=document.body.parentElement;
   // 如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。 
    console.log(html);

    //想获得body下的所有直接子元素: 应该是3个 span h1 script
    //错误做法: 
    //var childNodes=document.body.childNodes;
    //console.log(childNodes);//7个 原因：元素中的空格被视为文本，而文本被视为节点。
    //正确做法: 
    var children=document.body.children;
    console.log(children);//3个
    
    //想获得body下的第一个直接子元素: 应该是span
    //错误做法: 
    //var span=document.body.firstChild;
    //正确做法: 
    var span=document.body.firstElementChild;
    console.log(span);
    
    //想实现body中最后一个直接子元素: 应该是script
    var script=document.body.lastElementChild;
    console.log(script);
    
    //想获得body中第二个孩子：应该是h1
    var h1=document.body.children[1]; //从零开始 0，1，2，3
    console.log(h1);
    
    //想获得h1，还可以通过span的下一个兄弟元素获得
    var h1=span.nextElementSibling;
    console.log(h1);
    
    //想获得h1，还可以通过script的前一个兄弟元素获得
    var h1=script.previousElementSibling;
    console.log(h1);
  </script>
</body>

**4. 按选择器查找: **
如果元素藏的很深，查找条件很复杂时，都要选择按选择器查找
(1). 只查找一个符合条件的元素:

var 一个元素对象=任意父元素.querySelector("任意选择器");

(2). 查找多个符合条件的元素:

var 类数组对象=任意父元素.querySelectorAll("任意选择器");

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)