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 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
JavaScript 中的六种循环方法
Jan 06 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
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Javascript 解疑
2009/11/11 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
Python实现的计算马氏距离算法示例
2018/04/03 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
小学生元旦广播稿
2014/02/21 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
医院标语大全
2014/06/23 职场文书
2014年工程部工作总结
2014/11/25 职场文书
初中优秀学生评语
2014/12/29 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
pt-archiver 主键自增
2022/04/26 MySQL