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


Posted in Javascript onJanuary 09, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行结果。

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

Javascript 相关文章推荐
JS实现简单的Canvas画图实例
Jul 04 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
vue component组件使用方法详解
Jul 14 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
vue实现学生信息管理系统
May 30 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 #Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 #Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 #Javascript
Node.js的进程管理的深入理解
Jan 09 #Javascript
从vue源码看props的用法
Jan 09 #Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 #Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 #Javascript
You might like
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php自定义错误处理用法实例
2015/03/20 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
ES6概念 ymbol.for()方法
2016/12/25 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
vue中component组件的props使用详解
2017/09/04 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python reduce()函数的用法小结
2017/11/15 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
C#面试题问题集
2016/04/02 面试题
电子商务毕业生求职信
2013/11/10 职场文书
老师自我鉴定范文
2013/12/25 职场文书
关于旷工的检讨书
2014/02/02 职场文书
社团活动总结范文
2014/04/26 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
义诊活动总结
2015/02/04 职场文书
工作表现证明
2015/06/15 职场文书
学雷锋活动简报
2015/07/20 职场文书
环保建议书作文400字
2015/09/14 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL