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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
javascript 有趣而诡异的数组
Apr 06 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
微信小程序自定义单项选择器样式
Jul 25 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
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
xmlHTTP实例
2006/10/24 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
python八大排序算法速度实例对比
2017/12/06 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
python中threading开启关闭线程操作
2020/05/02 Python
外语学院毕业生的自我鉴定
2013/11/28 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
学校党支部承诺书
2015/04/30 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Vue h函数的使用详解
2022/02/18 Vue.js
Python中的嵌套循环详情
2022/03/23 Python
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers
JavaScript实现音乐播放器
2022/08/14 Javascript