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表单提交的代码
Sep 13 Javascript
传智播客学习之JavaScript基础篇
Nov 13 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
谈谈node.js中的模块系统
Sep 01 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
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
python实现图片素描效果
2020/09/26 Python
python3中布局背景颜色代码分析
2020/12/01 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
顶碗少年教学反思
2014/02/21 职场文书
实习证明格式范文
2014/10/14 职场文书
自主招生自荐信格式
2015/03/04 职场文书
《西门豹》教学反思
2016/02/23 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电