JavaScript驾驭网页-DOM_javascript技巧

一、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

节点类型

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

见图2

节点特性

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

以下是常用的节点特性:

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_dom
javascript dom、javascript dom操作、javascript dom是什么、javascript dom编程、javascript dom对象,以便于您获取更多的相关知识。

时间: 2025-01-23 22:42:06

JavaScript驾驭网页-DOM_javascript技巧的相关文章

JavaScript驾驭网页-CSS与DOM_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能 这里有HTML代码与CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> span.class

JavaScript驾驭网页-获取网页元素_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪.只是不用收拾列羹剩肴,但也没有办法享受美味的成果. 不过,你将能完整网页内容的HTML构成要素:更重要的是,你将拥有替换网页成分的能力. JavaScript让你可以随心所欲地操控网页的HTML代码,从而打开各种有趣的机会之门,一切都是因为标准对象:DOM的存在 getElementById HTML标签都有一个"id"

基于JavaScript创建动态Dom_javascript技巧

动态脚本 我们在页面中使用<script>元素就可以向页面中插入javascript代码.有两种方式:一种是通过src属性引用外部的JS文件,一种是用这个元素来包含一段js代码.所谓的动态脚本,就是指这个脚本在页面加载时不存在,在将来的某一个时刻通过修改DOM来动态的添加脚本.与操作html元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码. 动态加载的外部JavaScript代码可以立刻被执行,例如下面的代码: var script = document.cr

javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)_javascript技巧

平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200

使用JavaScript解决网页图片拉伸问题(推荐)_javascript技巧

问题描述 这段时间在做PM的需求的时候突然发现一个问题,产品上的图片来自多个第三方,具体的尺寸无法确定,如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象,十分影响产品的美观,因此希望可以找到一个比较好的解决方案.自己先做了一个简单的demo来展示问题. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <

JavaScript返回网页中超链接数量的方法_javascript技巧

本文实例讲述了JavaScript返回网页中超链接数量的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获取网页中的所有超级链接,从而获得超链接的数量 <!DOCTYPE html> <html> <body> <img src ="planets.gif" width="145" height="126" alt="Planets" usemap

JavaScript让网页出现渐隐渐显背景颜色的方法_javascript技巧

本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript渐隐渐显的背景颜色</title> <style fprolloverstyle>A:hover

JavaScript获取网页中第一个图片id的方法_javascript技巧

本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"

JavaScript获取网页中第一个链接ID的方法_javascript技巧

本文实例讲述了JavaScript获取网页中第一个链接ID的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获得网页中的所有超级链接数组,然后获得第一个链接的ID属性 <!DOCTYPE html> <html> <body> <h1>sharejs.com</h1> <img src ="planets.gif" width="145" height="