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 打印内容方法小结
Nov 04 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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
一段防盗连的PHP代码
2006/12/06 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
详解vue中组件参数
2018/07/09 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python实现视频分帧效果
2019/05/31 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
IBatis持久层技术
2016/07/18 面试题
超市重阳节活动方案
2014/02/10 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
甜品店创业计划书
2014/09/21 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
蓬莱阁导游词
2015/02/04 职场文书
刘公岛导游词
2015/02/05 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js