JavaScript驾驭网页－DOM

2024-12-17 01:51:50

一、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,感兴趣的朋友点击查看详情！

使用js Math.random()函数生成n到m间的随机数字

摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备. Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: 第一步算出 m-n的值,假设等于w 第二步Math.random()*w 第三步Math.random()*w+n 第四步parseInt(Math.random()*w+n, 10) 生成n-m,不包含n但包含m的整数: 第一步算出 m-n的值,假设等于w 第二步Math
javascript中html字符串转化为jquery dom对象的方法

原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px
javascript学习笔记（三）BOM和DOM详解

js组成我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM
jquery对象和javascript对象即DOM对象相互转换

jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象. DOM对象就是Javascript 固有的一些对象操作.DOM 对象能使用Javascript 固有的方法,但是不能使用
JS、CSS以及img对DOMContentLoaded事件的影响

前端的纯技术就是对规范的认知什么是DOMContentLoaded事件? 首先想到的是查看W3C的HTML5规范,DOMContentLoaded事件在什么时候触发: Once the user agent stops parsing the document, the user agent must run the following steps: 1. Set the current document readiness to "interactive" and the inse
js设置document.domain实现跨域的注意点分析

本文实例分析了js设置document.domain实现跨域的注意点.分享给大家供大家参考.具体分析如下: document.domain 用来得到当前网页的域名. 比如在地址栏里输入: 复制代码代码如下: javascript:alert(document.domain); //www.jb51.net 我们也可以给document.domain属性赋值,不过是有限制的,你只能赋成当前的域名或者基础域名. 比如: 复制代码代码如下: javascript:alert(document.do
在javascript中随机数 math random如何生成指定范围数值的随机数

今天有朋友向我请教:JavaScript 怎么生成指定范围数值随机数.Math.random() 这个方法相信大家都知道,是用来生成随机数的.不过一般的参考手册时却没有说明如何用这个方法来生成指定范围内的随机数.这次我就来详细的介绍一下Math.random(),以及如何用它来生成制定范围内的随机数. w3school的random()教程定义和用法 random() 方法可返回介于 0 ~ 1 之间的一个随机数. 语法 Math.random() 返回值 0.0 ~ 1.0 之间的一个伪随机
Javascript基础知识（三）BOM，DOM总结

window对象: 打开和关闭窗口: window.open() 三个参数:1.载入新窗口的页面的URL 2.新窗口的名字 3.特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值. window.close() 系统对话框: 1.alert("hello world!"); 2.confirm("Are you sure?");---选择 3.prompt("你的名字是说明?",""); 时间间隔 setT
简介AngularJS的HTML DOM支持情况

以下指令可用于应用程序数据绑定到HTML DOM元素的属性. 添加ng-show属性到一个HTML按钮,并把它传递模型.绑定模型到复选框,看看以下变化. <input type="checkbox" ng-model="showHide1">Show Button <button ng-show="showHide1">Click Me!</button> ng-hide 指令添加ng-hide属性为HTML
javascript获取dom的下一个节点方法

利用javascript 写一个在页面点击加减按钮实现数字的累加. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" value="+" onclick="jia(this)" /> <label class="num">0</label> <input type="button" value="-"
通过JS动态创建一个html DOM元素并显示

近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个

JavaScript驾驭网页－DOM

相关推荐

随机推荐