JavaScript驾驭网页-DOM


Posted in Javascript onMarch 24, 2016

一、DOM全称

文档对象模型(Document Object Model)

二、DOM是什么

DOM就是一个编程接口,就是一套API。
DOM是针对HTML文档、XML等文档的一套API。就类似于JDBC是针对数据库的一套API一样。

三、DOM的用途

DOM 是用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。

现在基本上所有的浏览器都都执行了W3C发布的DOM规范,所以在浏览器上就可以用DOM的这些API。

DOM提供对脚本友善的网页结构与内容的视图

DOM把网页视为节点构成的层次树

DOM树

每棵DOM树的最顶端节点都是Document,它在HTML节点的上层

网页是DOM节点的集合

见图1

JavaScript驾驭网页-DOM

节点类型

网页节点是按类别分类的,主要有元素节点与文本节点构成

见图2

JavaScript驾驭网页-DOM

节点特性

利用节点特性能用于导览节点树

以下是常用的节点特性:

nodeValue 存储于节点的值,只限于文本与属性节点使用(不含元素)

nodeType 节点类型,例如它是DOCUMENT或TEXT等等,但以代号表示

childNodes 包含节点下所有子节点的数组,以出现在HTML代码中的顺序而排列

firstChild 节点下的第一个子节点

lastChild 节点下的最后一个子节点

例子

document.getElementById(“id”).nodeValue;//获取某节点下的纯文本 
document.getElementsByTagName(“body”)[0].childNodes[1].lastChild;//body下的第二个子节点的最后一个节点

利用DOM改变元素的内容

首先 移除所有子节点

然后 根据新内容创建新的文本节点

最后 把新创建的文本子节点附加到节点下

这里涉及到三个方法

removeChidl()移除目标节点下的一个子节点,传入将被移除的子节点

createTextNode()从文本字符串创建文本节点

appendChildO()以最后一个子节点的开工加入新节点,传入将被新增加的子节点

var node=document.getElementById(“id”);//获取元素 
while (node.firstChild)//删除元素下的所有子节点(这里判断子节点是否存在,存在为true) 
node.removeChild(node.firstChild) 
node.appendChild(document.createTextNode(“message”))//为元素添加新内容

总结

innerHTML虽并非万维网的标准,但这个特性能访问元素内存储的所有内容

Document Object Model(文档对象模型),简称DOM,提供访问和修改网页数据的标准化机制

DOM视图页为关联节点的层次树

使用DOM(而非innerHTML)改变网页内容的方案,需移除元素下所有的子节点,然后创建并附加上包含新内容的新子节点。

关于JavaScript驾驭网页-DOM就给大家介绍到这里,下篇将给大家介绍JavaScript驾驭网页-CSS与DOM,感兴趣的朋友点击查看详情!

Javascript 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
常用的JQuery函数及功能小结
Mar 24 #Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 #Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 #Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 #Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 #Javascript
java中String类型变量的赋值问题介绍
Mar 23 #Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 #Javascript
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
小程序实现多列选择器
2019/02/15 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python3实现逐字输出的方法
2019/01/23 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
英语师范专业毕业生自荐信
2013/09/21 职场文书
房产协议书范本2014
2014/09/30 职场文书
主题班会开场白
2015/06/01 职场文书
电影雷锋观后感
2015/06/10 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
MySQL8.0的WITH查询详情
2021/08/30 MySQL
nginx容器方式反向代理实战
2022/04/18 Servers
Rust中的Struct使用示例详解
2022/08/14 Javascript