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 相关文章推荐
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP生成随机密码类分享
2014/06/25 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python matplotlib画图实例代码分享
2017/12/27 Python
Python贪心算法实例小结
2018/04/22 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
优秀员工自荐书
2015/03/06 职场文书
博士生专家推荐信
2015/03/25 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Python面向对象编程之类的概念
2021/11/01 Python