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

    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的样式 ）

    1. html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 	<title>网页title>
    7. 	<script src="js/e.js" type="text/javascript">script>
    8. 	<style>
    9. 		.highlighted{
    10. 			background-color: yellow;
    11. 			border: 1px dashed #666600;
    12. 			font-weight: bold;
    13. 		}
    14. 	style>
    15. head>
    16. <body>
    18. <div id="main">
    19. 	<p>洞庭西望楚江分，水尽南天不见云。p>
    20. 	<p>日落长沙秋色远，不知何处吊湘君。p>
    21. 	<p>水尽南天不见云p>
    22. 	<ul>
    23. 		<li name="a">日落长沙秋色远，不知何处吊湘君。li>
    24. 		<li name="a">白鱼双尾玉刀明，li>
    25. 		<li name="a">灵山多秀色li>
    26. 		<li name="a">灵山多秀色li>
    27. 	ul>
    28. div>
    29. <p>Lorem ipsum dolor sit. <br>
    30. Lorem, ipsum.
    31. p>
    32. <hr>
    33.  
    34. <div>
    35. 	查找文本（将找到的文本高亮显示）：
    36. 	<input type="text" id="searchtext">
    37. 	<button id="searchbutton">searchbutton>
    38. div>
    39. body>
    40. html>
    1.  
    2. function searchClick(){
    3. 	var a=document.getElementById('searchtext');//添加的位置
    4. 	searchtext=a.value;//保存要查找的内容
    5. 	//查找的位置
    6. 	var main=document.getElementById("main");//通过id查找对象
    7. 	var tagname=main.getElementsByTagName("p");//通过标签名查找对象----结果是集合
    8. 	//使用数组
    9. 	for(var i=0;ilength;i++){
    10. 		if(tagname[i].innerHTML.indexOf(searchtext)>=0){ //indexOf查找内容出现的位置
    11. 			tagname[i].className ="highlighted" //className访问css代码
    12. 		}else{
    13. 			tagname[i].className=null;
    14. 		}
    15. 	}
    16. 	var name=document.getElementsByName("a");//通过名称查找对象----结果是集合
    17. 	//使用数组
    18. 	for(var i=0;ilength;i++){
    19. 		if(name[i].innerHTML.indexOf(searchtext)>=0){ //indexOf查找内容出现的位置
    20. 			name[i].className ="highlighted" //className访问css代码
    21. 		}else{
    22. 			name[i].className=null;
    23. 		}
    24. 	}
    25. }
    26.  
    27. window.onload=function(){
    28.  
    29. 		document.getElementById('searchbutton').onclick=searchClick;//上面连成一句
    30.  
    31. 		
    32. }

    创建和删除节点：

    appendChild(node)——在节点的字节点列表尾追加节点 

    insertBefore（mew,old）——在节点的子节点的old位置前加new节点

    removeChile(node)——在节点的子节点列表中移除给定的节点

    replaceChild(new,old)——用新节点替换旧节点

    单击一次添加一个节点

     

     

  • 相关阅读:
    DevOps转型的意义：加速创新、提高效率
    信号处理中简单实用的方法——提取信号中的包络
    十沣科技自主研发仿真软件 有效实现飞机起落噪声精细仿真
    RIP路由
    k8s 清理旧版本的镜像
    python变量、函数、类的命名规则 以及NamedTuple的使用
    【日常训练】207. 课程表
    【2022硬件设计开源盛宴】一年一度的hackaday大赛结束，冠军便携式风力涡轮机，共提交326个电子作品，奖金池15万美元
    目标检测｜边框检测框转换，交并比计算 代码实现
    在 Windows 上开发.NET MAUI 应用_1.安装开发环境
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/126264534