当前位置：网站首页>DOM树的遍历-----修改样式，选择元素，创建和删除节点

DOM树的遍历-----修改样式，选择元素，创建和删除节点

2022-08-11 02:31:00 【（-^_^-）】

DOM树具有以下三种节点;

元素节点：html标签---可以有子节点或属性

文本节点：块元素中的文本---始终作为元素节点的子节点出现，不可以有子节点或属性

属性节点：属性/值---不可以有子节点或属性，绘制DOM树时候通常不显示

每个DOM节点具有以下属性：

firstchild——这一节点的子节点列表中的开始节点

lastChild——这一节点的子节点列表中的结束节点

childNodes——这一节点的所有字节点数组

nextSibling——这一节点的之后的紧跟的节点（具有相同父节点）

previousSibling——这一节点的之前的紧跟的节点（具有相同父节点）

parentNode——这一节点的父节点

实际分析

如何修改使用var a.firstchildnextsibling.firstchild.textcontent="footbal"(修改了p节点的第一个子节点的下一个节点的第一个字节点即文本节点的文本内容)

问题下面的id=fo的元素节点有几个孩子：

答案：3个段落之前：\n\t的文本节点 p元素节点 \n文本节点

如何选择元素组

”全局文档-文档对应的是对象--相关的方法

getElementById（）----------根据ID选择DOM对象

getElementsByName（）——根据指定名称选择DOM对象

getElementsByTagName（）——根据标签名选择DOM对象

querySelector（）——根据匹配指定的CSS选择器的第一元素选择DOM对象

querySelectorAll（）——文档中匹配的CSS选择器的所有元素节点列表

点击查找文本并设置样式（通过CSS的样式）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>网页</title>
	<script src="js/e.js" type="text/javascript"></script>
	<style>
		.highlighted{
			background-color: yellow;
			border: 1px dashed #666600;
			font-weight: bold;
		}
	</style>
</head>
<body>
<!-- 联系的函数 -->
<div id="main">
	<p>洞庭西望楚江分，水尽南天不见云。</p>
	<p>日落长沙秋色远，不知何处吊湘君。</p>
	<p>水尽南天不见云</p>
	<ul>
		<li name="a">日落长沙秋色远，不知何处吊湘君。</li>
		<li name="a">白鱼双尾玉刀明，</li>
		<li name="a">灵山多秀色</li>
		<li name="a">灵山多秀色</li>
	</ul>
</div>
<p>Lorem ipsum dolor sit. <br>
Lorem, ipsum.
</p>
<hr>

<div>
	查找文本（将找到的文本高亮显示）：
	<input type="text" id="searchtext">
	<button id="searchbutton">search</button>
</div>
</body>
</html>


function searchClick(){
	var a=document.getElementById('searchtext');//添加的位置
	searchtext=a.value;//保存要查找的内容
	//查找的位置
	var main=document.getElementById("main");//通过id查找对象
	var tagname=main.getElementsByTagName("p");//通过标签名查找对象----结果是集合
	//使用数组
	for(var i=0;i<tagname.length;i++){
		if(tagname[i].innerHTML.indexOf(searchtext)>=0){ //indexOf查找内容出现的位置
			tagname[i].className ="highlighted" //className访问css代码
		}else{
			tagname[i].className=null;
		}
	}
	var name=document.getElementsByName("a");//通过名称查找对象----结果是集合
	//使用数组
	for(var i=0;i<name.length;i++){
		if(name[i].innerHTML.indexOf(searchtext)>=0){ //indexOf查找内容出现的位置
			name[i].className ="highlighted" //className访问css代码
		}else{
			name[i].className=null;
		}
	}
}

window.onload=function(){

		document.getElementById('searchbutton').onclick=searchClick;//上面连成一句

		
}