JavaScript之DOM_动力节点Java学院整理


Posted in Javascript onJuly 03, 2017

由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:

  1. 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;
  2. 遍历:遍历该DOM节点下的子节点,以便进行进一步操作;
  3. 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;
  4. 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。

在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()document.getElementsByTagName(),以及CSS选择器document.getElementsByClassName()

由于ID在HTML文档中是唯一的,所以document.getElementById()可以直接定位唯一的一个DOM节点。

document.getElementsByTagName()document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM,可以先定位父节点,再从父节点开始选择,以缩小范围。

例如:

// 返回ID为'test'的节点:
var test = document.getElementById('test');

// 先定位ID为'test-table'的节点,再返回其内部所有tr节点:
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点,再返回其内部所有class包含red的节点:
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点:
var first = test.firstElementChild;
var last = test.lastElementChild;

第二种方法是使用querySelector()querySelectorAll(),需要了解selector语法,然后使用条件来获取节点,更加方便:

// 通过querySelector获取ID为q1的节点:
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点:
var ps = q1.querySelectorAll('div.highlighted > p');

注意:低版本的IE<8不支持querySelectorquerySelectorAll。IE8仅有限支持。

严格地讲,我们这里的DOM节点是指Element,但是DOM节点实际上是Node,在HTML中,Node包括ElementCommentCDATA_SECTION等很多种,以及根节点Document类型,但是,绝大多数时候我们只关心Element,也就是实际控制页面结构的Node,其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document

练习

如下的HTML结构:

JavaScript
Java
Python
Ruby
Swift
Scheme
Haskell

<!-- HTML结构 -->
<div id="test-div">
<div class="c-red">
  <p id="test-p">JavaScript</p>
  <p>Java</p>
 </div>
 <div class="c-red c-green">
  <p>Python</p>
  <p>Ruby</p>
  <p>Swift</p>
 </div>
 <div class="c-green">
  <p>Scheme</p>
  <p>Haskell</p>
 </div>
</div>

请选择出指定条件的节点:

// 选择<p>JavaScript</p>:
var js = ???;
// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = ???;
// 选择<p>Haskell</p>:
var haskell = ???;

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
javaScript中封装的各种写法示例(推荐)
Jul 03 #Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 #Javascript
React组件生命周期详解
Jul 03 #Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 #Javascript
Swiper实现轮播图效果
Jul 03 #Javascript
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
在JavaScript中调用php程序
2009/03/09 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python遍历目录中的所有文件的方法
2016/07/08 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
django最快程序开发流程详解
2019/07/19 Python
python中安装django模块的方法
2020/03/12 Python
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis