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 相关文章推荐
javascript 写类方式之三
Jul 05 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
javascript实现的简单计时器
Jul 19 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
vue路由实现登录拦截
Mar 24 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
委托书如何写
2014/08/30 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
python 多态 协议 鸭子类型详解
2021/11/27 Python
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫