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

更新时间：2019年01月09日 10:18:59 作者：致Great

这篇文章主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下

本文实例讲述了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>

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>

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>

实例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>

三、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程序设计有所帮助。

您可能感兴趣的文章:

Nginx上传文件全部缓存解决方案
Nginx默认会对上传的文件先在本地进行缓存，再转发到应用服务器。请问怎么禁止掉这个缓存，让Nginx只转发而不缓存文件？本文给大家详细介绍Nginx上传文件全部缓存解决方案，有需要的朋友来参考下
2015-08-08
微信小程序自定义底部弹出框动画
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
写给小白看的JavaScript异步
写给小白看的JavaScript异步，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
javascript 动态加载 css 方法总结
有时候我们在设计网页的时候想动态的加载css文件,并不是将css文件写死在页面中,这时就可以使用下面方法.
2009-07-07
bootstrap 模态框（modal）实现水平垂直居中显示
这篇文章主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
Js数组扁平化实现方法代码总汇
这篇文章主要介绍了Js数组扁平化实现方法代码总汇,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
js获取今天、昨天、明天的日期函数代码
这篇文章主要介绍了js获取今天、昨天、明天的日期函数代码,需要的朋友可以参考下
2023-05-05
JavaScript中 ES6 generator数据类型详解
generator 是ES6引入的新的数据类型，由function* 定义, (注意*号),接下来通过本文给大家介绍js中 ES6 generator数据类型，非常不错，感兴趣的朋友一起学习吧
2016-08-08
JavaScript实现的超简单计算器功能示例
这篇文章主要介绍了JavaScript实现的超简单计算器功能,可实现基本的四则运算并带有验证功能,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下
2017-12-12
JavaScript webpack模块打包器如何优化前端性能
本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08