JavaScript学习笔记之DOM基础操作实例小结

程序员文章站 2023-11-21 08:43:22

本文实例讲述了javascript dom基础操作。分享给大家供大家参考，具体如下：一、子节点 1、元素节点、文本节点实例01 html

本文实例讲述了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(){
  varoul=document.getelementbyid('ul1');
  alert(oul.parentnode);
 };*/
 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>

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行结果。

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript操作dom技巧总结》、《javascript页面元素操作技巧总结》、《javascript事件相关操作与技巧大全》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript错误与调试技巧总结》

希望本文所述对大家javascript程序设计有所帮助。

上一篇：浅谈webpack性能榨汁机(打包速度优化)

下一篇： php生成图片验证码