DOM简介

DOM是W3C（万维网联盟）的标准 "W3C文档对象模型DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构、样式".W3C DOM标准分为3个不同部分

HTML DOM 定义了所有HTML元素的对象和属性，以及访问它们的方法

HTML DOM 节点

DOM 节点 HTML文档中所有内容都是节点：

整个文档是一个文档节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

每个HTML属性是属性节点

注释是注释节点

HTML DOM Tree 节点树

树中所有节点均可以通过JS访问，修改。

节点父、子、同胞

节点树中节点间彼此拥有层级关系

Parent，child，sibling

警告！

DOM处理中常见错误是希望元素节点包含文本

<title>DOM学习</title> 元素节点是<title>，包含值"DOM学习"的文本节点

可以通过innerHTML属性来访问文本节点的值

HTML DOM 方法

编程接口

可以通过javascript（以及其他编程语言）对HTML DOM进行访问

所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性

方法是可以执行的动作（添加/修改元素）

属性是可以获取或者设置的值(节点名称/内容)

HTML DOM对象-方法-属性

getElementById(id)	获取带有执行id的节点（元素）
getElementsByTagName(tag)	获取所有指定标签的节点，p标签等
getElementsByClassName（class）	获取所有指定类型的节点
createElement(ele)	创建新标签元素
createTextNode（txt）	创建文本节点
insertBefore(newNode，node)	在node节点之后插入newNode
appendChild(node)	插入新节点（元素），作为父节点的最后一个子节点
replaceNode(newNode,oldNode)	替换旧元素
removeChild(node)	删除子节点（元素）
innerHTML	节点（元素）的文本值
parentNode	节点（元素）的父节点
childNodes	节点（元素）的子节点
attributes	节点（元素）的属性节点

HTML DOM属性

innerHTML属性获取元素内容

nodeName属性规定节点名称

nodeName属性是只读属性

元素节点的nodeName与标签名称相同

属性节点的nodeName与属性名称相同

文本节点的nodeName始终是#text

文档节点的nodeName始终是#document

nodeName始终包含HTML元素的大写字母标签名称

nodeValue属性规定节点值

元素节点的nodeValue是undefined或null

文本节点的nodeValue是文本本身

属性节点的nodeValue是属性值

nodeType属性返回节点类型，只读属性


属性	2
文本	3
注释	8
文档	9

举例

<!doctype html>

<html>

<!--<head>

<meta charset="utf-8">

<title>Dom事件</title>

</head>-->

<body>

<p id="myid1" style="color:blue">我的文档内容1</p>

<p id="myid2" style="color:blue">我的文档内容2</p>

<script type="text/javascript">

var node=document.getElementById("myid1"); //通过id号获取元素节点

document.write(node.innerHTML+"<br>"); //输出元素节点的文本内容

node.innerHTML="更新文档内容 via innerHTML"; //更新元素节点的文本内容

document.getElementById("myid2").firstChild.nodeValue="更新文档内容via nodeValue";//更新元素节点的文本内容

document.write(node.nodeName+"\t"+node.nodeValue+"<br>");

document.write(node.firstChild.nodeName+"\t"+node.firstChild.nodeValue+"<br>"); //输出文本节点和值

</script>

</body>

</html>

HTML DOM访问查找HTML元素

getElementById（id）	获取指定id的元素
getElementsByTagName（tag）	获取带有指定标签名（p标签，a标签等）的所有元素
getElementsByClassName（class）	获取带有相同类名的所有元素

HTML DOM修改

改变元素文本内容 parentNode.innerHTML node.nodeValue

改变CSS样式 node.style

改变HTML属性

创建新的HTML元素 createElement - createTextNode- appendChild

删除已有的HTML元素 parentNode.removeChild (childNode) childNode.parentNode.removeChild(childNode)

改变事件（处理程序）

HTML DOM事件

用户点击鼠标 onclick

<input type="button" id="mybtn" value="提交" onclick="this.value='不提交'"/> //直接将javascript语句写在事件处理中

< input type="button" id="mybtn" value="提交" onclick="myFunction(this)"/>//通过js函数执行，注意实参直接是指定元素

<script type="text/javascript">

Function myFunction(ele){ //虽然实参是this，但是在写函数时，不可以将形参命名为this，与关键字冲突

ele.value="不提交";

}

</script>

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。

网页已经加载 onload

离开网页 onunload

图片已经加载

鼠标移动到元素上 onmouseover

鼠标离开元素 onmouserout

<script type="text/javascript">

function mOver(obj){

obj.innerHTML="Thank you!";

obj.style.width="300px";

obj.style.marginTop="25px";

}

function mOut(obj){

obj.innerHTML="Mouse Over Me!";

obj.style.width="200px";

obj.style.marginTop="0px";

}

</script>

<div onmouseover="mOver(this);" onmouseout="mOut(this);"

style="background-color:#CCFFAA;width:200px;height:50px;padding-top:25px;text-align:center;">

Mouse Over Me!

</div>

输入字段改变 onchange

<script type="text/javascript">

function myFunction(){

var ele=document.getElementById("username");

var inputstr=ele.value.trim();

if(inputstr==null || ""==inputstr){

alert("必须输入字符串");

}else {

var regexp=/^[a-zA-Z]+$/;

var result=inputstr.match(regexp);

if(result==null){

alert("不匹配");

ele.value="";

}

else

alert("匹配成功");

}

</script>

<p>请输入用户名

<input type="text" id="username" onchange="myFunction();">

</p>

HTML表单提交 onsubmit

用户出发按键 onkeydown

HTML DOM导航

使用节点关系在节点数中导航

getElementsByTagName（tag）方法返回节点列表，节点列表是一个节点数组，可以通过下标访问某个节点元素，下标号从0开始

导航节点关系：三个节点属性 parentNode，firstChild，lastChild

DOM根节点：可以访问全部文档 document.documentElement –全部文档

Document.body ---文档主题

childNodes属性和nodeValue属性

DOM文档对象模型简介的更多相关文章

html--JavaScript之DOM (文档对象模型)
一.简介当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标 ...
javascript之DOM文档对象模型编程的引入
/* DOM(Document Object Model) 文档对象模型一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我们在浏览器上看 ...
JavaScript（三、DOM文档对象模型）
一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: &q ...
dom文档对象模型图
文档对象模型 DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】
全部章节 >>>> 本章目录 4.1 文档对象模型简介及属性 4.1.1 文档对象模型概述 4.1.3 实践练习 4.2 document 对象查找 HTML 元素 4.2 ...
JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
JS -- DOM（文档对象模型）
认识DOM(文档对象模型) DOM(Document Object Model):定义访问和处理HTML文档的标准方法. DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). < ...
DOM（文档对象模型）
1.定义: DOM是Document Object Model文档对象模型的缩写.是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 例如:我们有一段HTML,那么如何访问第二层第一个 ...

随机推荐

idea中添加类和方法注释以及codeCheck
前言:在idea中我们添加类以及类的方法的注释很有必要,让其他人能够看懂这个类或者函数的作用是什么:为了在开发过程中检查自己的编程规范,可以通过codecheck工具进行自我检查和约束一.在idea ...
PHP从入门到精通
php基本语法 1.变量类型 a.标量类型 bool integer float string b.复合类型 array object c.特殊类型 resource null d.伪类型 mixd ...
洛谷P4831 Scarlet loves WenHuaKe
这道题告诉我们推式子的时候头要够铁. 题意问一个$n\times m$的棋盘,摆上$n\times 2$个中国象棋的炮使其两两不能攻击的方案数,对$998244353$取模. \((n\ ...
BZOJ2756 SCOI2012奇怪的游戏（二分答案+最大流）
由数据范围容易想到网络流.由于操作只是对于棋盘上相邻两格,容易想到给其黑白染色. 假设已经知道最后要变成什么数.那么给黑白点之间连边,其流量则表示同时增加的次数,再用源汇给其限流为需要增加的数即可. ...
MT【86】两个绝对值之和最大
分析:这里只需要注意到$(|x|+|y|)_{max}=max\{|x+y|,|x-y|\}$,所以只需求$max\{|20a|,|14b|\}$ 进而变成熟悉的反解系数问题.容易知道最大值为$a=2 ...
【题解】 POJ 1201 Intervals（差分约束）
懒得复制,戳我戳我 Solution: 这道题就是一个板子题抽象成第$a$至第$b$间选择数的个数为$c$,我们就可以用前缀和来表示,这样就可以得到不等式\(s[b]-s[a-1]> ...
洛谷 P3956 棋盘解题报告
P3956 棋盘题目描述有一个$m×m$的棋盘,棋盘上每一个格子可能是红色.黄色或没有任何颜色的.你现在要从棋盘的最左上角走到棋盘的最右下角. 任何一个时刻,你所站在的位置必须是有颜色的(不能 ...
解题：NOI 2010 航空管制
题面常见的套路与不常见的套路第一问是常见的套路,建反边用优先队列跑拓扑排序第二问是不常见的套路,如何判断一个点最早什么时候起飞?先不加它来拓扑排序,直到拓扑排序不能进行下去了,这个时刻就是它必须 ...
Python3：if __name__ == '__main__' 详解
一般在风格比较好的代码中会有一行if __name__ == '__main__' :代码,这里说明一下这句代码的用处,先上两个代码test1.py和test2.py: # test1.py prin ...
Docker：搭建私有仓库（Registry 2.4）
一.背景首先,Docker Hub是一个很好的用于管理公共镜像的地方,我们可以在上面找到想要的镜像(Docker Hub的下载量已经达到数亿次):而且我们也可以把自己的镜像推送上去.但是,有的时候, ...

DOM文档对象模型简介

DOM简介

HTML DOM 节点

HTML DOM 方法

HTML DOM属性

<!doctype html>

<html>

<!--<head>

<meta charset="utf-8">

<title>Dom事件</title>

</head>-->

<body>

<p id="myid1" style="color:blue">我的文档内容1</p>

<p id="myid2" style="color:blue">我的文档内容2</p>

<script type="text/javascript">

var node=document.getElementById("myid1"); //通过id号获取元素节点

document.write(node.innerHTML+"<br>"); //输出元素节点的文本内容

node.innerHTML="更新文档内容 via innerHTML"; //更新元素节点的文本内容

document.getElementById("myid2").firstChild.nodeValue="更新文档内容via nodeValue";//更新元素节点的文本内容

document.write(node.nodeName+"\t"+node.nodeValue+"<br>");

document.write(node.firstChild.nodeName+"\t"+node.firstChild.nodeValue+"<br>"); //输出文本节点和值

</script>

</body>

</html>

HTML DOM访问 查找HTML元素

HTML DOM修改

HTML DOM事件

<input type="button" id="mybtn" value="提交" onclick="this.value='不提交'"/> //直接将javascript语句写在事件处理中

< input type="button" id="mybtn" value="提交" onclick="myFunction(this)"/>//通过js函数执行，注意实参直接是指定元素

<script type="text/javascript">

Function myFunction(ele){ //虽然实参是this，但是在写函数时，不可以将形参命名为this，与关键字冲突

ele.value="不提交";

}

</script>

<script type="text/javascript">

function mOver(obj){

obj.innerHTML="Thank you!";

obj.style.width="300px";

obj.style.marginTop="25px";

}

function mOut(obj){

obj.innerHTML="Mouse Over Me!";

obj.style.width="200px";

obj.style.marginTop="0px";

}

</script>

<div onmouseover="mOver(this);" onmouseout="mOut(this);"

style="background-color:#CCFFAA;width:200px;height:50px;padding-top:25px;text-align:center;">

Mouse Over Me!

</div>

<script type="text/javascript">

function myFunction(){

var ele=document.getElementById("username");

var inputstr=ele.value.trim();

if(inputstr==null || ""==inputstr){

alert("必须输入字符串");

}else {

var regexp=/^[a-zA-Z]+$/;

var result=inputstr.match(regexp);

if(result==null){

alert("不匹配");

ele.value="";

}

else

alert("匹配成功");

}

}

</script>

<p>请输入用户名

<input type="text" id="username" onchange="myFunction();">

</p>

HTML DOM导航

childNodes属性和nodeValue属性

DOM文档对象模型简介的更多相关文章

随机推荐

热门专题

HTML DOM访问查找HTML元素