位置：首页-资讯-前端开发

JavaScript中怎么实现DOM操作

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章将为大家详细讲解有关JavaScript中怎么实现DOM操作，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

一、子节点

1、元素节点、文本节点

实例01

html

<body>
 <ulid="ul1">
文本节点1 <li></li>
文本节点2<li></li>
文本节点3<li></li>
文本节点4<li></li>
文本节点5<li></li>
文本节点6</ul>
<!--文本节点adsasda-->
<!--<span>元素节点 qeqweq</span>-->
</body>

javascript

<script>
 window.onload=function(){
  varoUl=document.getElementById('ul1');
  alert(oUl.childNodes.length);
 };
</script>

JavaScript中怎么实现DOM操作

2、nodeType属性

常见节点	nodeType值
元素节点	1
属性节点	2
文本节点	3

实例02

<script>
 window.onload=function(){
  varoUl=document.getElementById('ul1');
  for(vari=0;i<oUl.childNodes.length;i++){
   if(oUl.childNodes[i].nodeType==1){
   oUl.childNodes[i].style.background='red';
   }
  }
 };
</script>

JavaScript中怎么实现DOM操作

3、children获取元素节点

实例03

html代码

<ulid="ul1">
 <li>
  <!--子节点只算第一层的，在这里span是li的子节点，而不是ul的子节点-->
  <span>子节点</span>
 </li>
 <li></li>
</ul>

javascript代码

<script>
 window.onload=function(){
  varoUl=document.getElementById('ul1');
  //children获取元素节点
  //alert(oUl.children.length);
  for(vari=0;i<oUl.children.length;i++){
   oUl.children[i].style.background='red';
  }
 };
</script>

二、父节点

实例04

html代码

<script>
 window.onload=function(){
  varoUl=document.getElementById('ul1');
  alert(oUl.parentNode);
 };
</script>

javascript代码

<script>
 window.onload=function(){
  varoUl=document.getElementById('ul1');
  alert(oUl.parentNode);
 };
</script>

JavaScript中怎么实现DOM操作

实例05 父节点的应用

html代码

<ulid="ul1">
 <li>父节点1<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li>
 <li>父节点2<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li>
 <li>父节点3<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li>
 <li>父节点4<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li>
 <li>父节点5<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li>
 <li>父节点6<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li>
 <li>父节点7<ahref="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >隐藏</a></li>
</ul>

javascript代码

<script>
 
 window.onload=function(){
  varoA=document.getElementsByTagName('a');
  for(vari=0;i<oA.length;i++){
   oA[i].onclick=function(){
    this.parentNode.style.display='none';
   };
  }
 };
</script>

JavaScript中怎么实现DOM操作

三、firstChild

<!DOCTYPEhtml>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title></title>
 <script>
  window.onload=function(){
   varoUl=document.getElementById('ou1');
   //IE6-8
   //oUl.firstChild.style.background='red';
   //高级浏览器
   //oUl.firstElementChild.style.background='red';
   //兼容
   if(oUl.firstElementChild){
    oUl.firstElementChild.style.background='red';
   }
   else{
    oUl.firstChild.style.background='red';
   }
  };
 </script>
</head>
<body>
 <ulid="ou1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</body>
</html>

四、通过class类获取元素、以及函数封装

<!DOCTYPEhtml>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title></title>
 <script>
  functiongetByClass(oParent,sClass){
   varaResult=[];
   varaEle=oParent.getElementsByTagName('*');
   for(vari=0;i<aEle.length;i++){
    if(aEle[i].className==sClass){
     aResult.push(aEle[i]);
    }
   }
   returnaResult;
  }
  window.onload=function(){
   varoUL=document.getElementById('ul1');
   varaBox=getByClass(oUL,'box');
   for(vari=0;i<aBox.length;i++){
    aBox[i].style.background='red';
   }
  };
 </script>
</head>
<body>
<ulid="ul1">
 <liclass="box"></li>
 <liclass="box"></li>
 <li></li>
 <li></li>
 <liclass="box"></li>
 <li></li>
</ul>
</body>
</html>

关于JavaScript中怎么实现DOM操作就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉