HTML DOM简介

合集下载

HTMLDOM对象的属性和方法介绍

HTMLDOM对象的属性和⽅法介绍HTML DOM对象的属性和⽅法介绍DOM 是 Document Object Model（⽂档对象模型）的缩写。

DOM（⽂档对象模型）是针对HTML和XML⽂档的⼀个API（应⽤程序编程接⼝），它允许程序和脚本动态地访问和更新⽂档的内容，结构和样式。

W3C DOM 标准被分为 3 个不同的部分：核⼼ DOM - 针对任何结构化⽂档的标准模型XML DOM - 针对 XML ⽂档的标准模型HTML DOM - 针对 HTML ⽂档的标准模型HTML DOM 定义了所有 HTML 元素对象的属性，以及访问它们的⽅法，我们可以通过 Javascript 获取，修改，添加和删除 HTML 元素。

HTML DOM 对象有⼏种类型：1.Document 类型在浏览器中，Document 对象表⽰整个 HTML ⽂档。

1.1属性引⽤⽂档的⼦节点documentElementvar html = document.documentElement; //取得对<html>元素的引⽤bodyvar body = document.body; //取得对<body>元素的引⽤获取⽂档信息title通过 title 属性可以访问当前⽂档的标题，也可以修改当前⽂档的标题。

var originalTitle = document.title; //返回当前⽂档的标题document.title = "New title"; //修改当前⽂档的标题URL该属性返回当前页⾯完整的 URL，也就是浏览器地址栏中的全部地址信息。

⽐如我打开了⼀个页⾯，浏览器地址栏中的信息显⽰如下：/cqhaibin/p/6291640.html这些信息就是当前⽂档完整的 URL。

var url = document.URL;//返回当前⽂档完整的URLdomain该属性返回当前⽂档的服务器域名。

HTML文档对象模型(DOM)

结束
8.1 文档对象模型概述

1．浏览器对DOM标准的支持 2．树形结构表示文档
8.2 DOM核心接口
1．Node接口 2．Document接口 3．Element接口 4．Attr接口 5．CharacterData接口 6．Text接口 7．Common接口 8．接口定义的其他功能，以及其他DOM核心接口
8.3 DOM HTML
【课堂案例8-18】：验证表单数据【课堂案例8-19】：为所有段落加边框【课堂案例8-20】：选项卡效果【课堂案例8-21】：Web相册【课堂案例8-22】：修改网页背景色【课堂案例8-24】：覆盖显示图片【课堂案例8-25】：在网页中绘图【课堂案例8-26】：在网页中绘图
8.3 DOM HTML
1．HTMLDocument接口 2．HTMLElement接口
8.3 DOM HTML
【课堂案例8-9】：获取文档信息【课堂案例8-10】：修改文档中的链接【课堂案例8-11】：操作文档中的表格【课堂案例8-12】：获取文本框中用户输入的内容【课堂案例8-13】：获取单选框用户选择的内容【课堂案例8-14】：获取复选框用户选择的内容【课堂案例8-15】：控制下拉菜单【课堂案例8-16】：判断用户选取的文件类型【课堂案例8-17】：限制用户使用表单元素
8.2 DOM核心接口
【课堂案例8-1】：获取DOM树中的节点信息【课堂案例8-2】：删除DOM树中的节点【课堂案例8-3】：在DOM树中添加子节点【课堂案例8-4】：替换DOM树中的节点【课堂案例8-5】：复制DOM树中的节点【课堂案例8-6】：获取节点的属性【课堂案例8-7】：控制文本节点【课堂案例8-8】：提取网页中的超链接地址

DOM对象

二，节点
根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点
节点层次
节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
getElementById() 和 getElementsByTagName()
这两种方法，可查找整个 HTML 文档中的任何 HTML 元素，会忽略文档的结构。节点列表（nodeList）当我们使用节点列表时，通常要把此列表保存在一个变量中。您可以通过使用 length 属性来循环遍历节点列表：
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 DOM 被分为不同的部分（核心、XML及 HTML）和级别（DOM Level 1/2/3）： Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对 XML 文档的对象 HTML DOM 定义了一套标准的针对 HTML 文档的对象。
2，anchors anchors 集合可返回对文档中所有 Anchor 对象的引用。 3，forms forms集合可返回对文档中所有 Form 对象的引用。 4，images images集合可返回对文档中所有 Image 对象的引用。 5，links Links集合可返回对文档中所有 Area 和 Link 对象的引用。

DOM模型

使用DOM实现
实行添加一个图片、替换一个图片的功能
提示：使用document对象的创建结点的方法
删除一个DOM节点
删除一个DOM节点
删除一个元素节点、文本节点
通过父节点删除本节点： myParent.removeChild( mySelfNode ) 通过自己删除本节点： mySelfNode.parentNode.removeChild( mySelfNode )
node.firstChild、stChild
通过子节点获得父节点：node.parentNode
获得实例代码
重新做Demo4-5-1.html
使用DOM实现
分别通过id属性、<img />标签名取得图片元素结点
把生成的节点作为某一个节点（node）的子节点
作为node节点的最后一个子节点： node.appendChild( newNode ) 插入到node节点中某一子节点之前： node.insertBefore( newNode, oldNode )
实例代码
动手做Demo4-5-2.html
DOM的应用十分广泛，各种网页特效均有DOM的踪影
本节内容
DOM简介 DOM树和DOM节点访问DOM节点动态修改DOM节点 DOM节点的innerHTML属性
DOM树
DOM树
DOM将HTML文档抽象为树形结构，称这棵树为DOM树 HTML中的每一项内容都可以在DOM树中找到 DOM的核心就是对DOM树的操作，即增加、删除、修改DOM树中的内容
删除一个属性节点：node.attrName
=
‘’;
修改一个DOM节点

DOM基础

文档对象
document 描述当前窗口或指定窗口对象的文档。它包含了从<head>到</body>的内容。
松迪科技（北京）有限公司
文档对象
document属性 lastModified 文档最后修改日期，是一个 Date 对象。 referrer 如果文档通过点击连接打开，则 referrer 返回原来的 URL。 title <title>...</title>定义的文字。 fgColor <body>的 text 属性所表示的文本颜色。 bgColor <body>的 bgcolor 属性所表示的背景颜色。 linkColor <body>的 link 属性所表示的连接颜色。 alinkColor <body>的 alink 属性所表示的活动连接颜色。 vlinkColor <body>的 vlink 属性所表示的已访问连接颜色。
松迪科技（北京）有限公司
event对象
altKey 检索ALT键的当前状态可能的值 true为关闭 false为不关闭 button 检索按下的鼠标键可能的值： 0 没按键 1 按左键 2 按右键 3 按左右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键
松迪科技（北京）有限公司
松迪科技（北京）有限公司
窗口对象
close() 关闭一个已打开的窗口。 blur() 使窗口变为“非活动窗口”。 focus() 使窗口变为“活动窗口”。 scrollTo() [<窗口对象>.]scrollTo(x, y)；使窗口从左上角数起的(x, y)点滚动到窗口的左上角。 scrollBy() [<窗口对象>.]scrollBy(deltaX, deltaY)；使窗口向右滚动 deltaX 像素，向下滚动 deltaY 像素。如果取负值，则向相反的方向滚动。

DOM文档对象模型简介

DOM⽂档对象模型简介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节点之后插⼊newNodeappendChild(node)插⼊新节点（元素），作为⽗节点的最后⼀个⼦节点replaceNode(newNode,oldNode)替换旧元素removeChild(node)删除⼦节点（元素）innerHTML节点（元素）的⽂本值parentNode节点（元素）的⽗节点childNodes节点（元素）的⼦节点attributes节点（元素）的属性节点HTML DOM属性innerHTML属性获取元素内容nodeName属性规定节点名称nodeName属性是只读属性元素节点的nodeName与标签名称相同属性节点的nodeName与属性名称相同⽂本节点的nodeName始终是#text⽂本节点的nodeName始终是#text⽂档节点的nodeName始终是#documentnodeName始终包含HTML元素的⼤写字母标签名称nodeValue属性规定节点值元素节点的nodeValue是undefined或null⽂本节点的nodeValue是⽂本本⾝属性节点的nodeValue是属性值nodeType属性返回节点类型，只读属性元素类型nodeType元素1属性2⽂本3注释8⽂档9举例<!doctype html><html><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 事件可⽤于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的⽹页。

dom常用话术

dom常用话术DOM（DocumentObjectModel）是一种用于处理HTML和XML文档的编程接口。

在Web开发中，DOM的重要性不言而喻，它是JavaScript 与HTML文档之间的桥梁，可以让我们通过JavaScript来操作HTML 文档中的元素。

本文将介绍一些常用的DOM话术，以帮助读者更好地理解和应用DOM。

1. 获取元素在操作HTML文档之前，我们需要先获取HTML文档中的元素。

DOM 提供了多种方法来获取元素，常用的有以下几种：1.1 getElementById该方法可以通过元素的id属性获取元素，返回值是一个元素对象。

例如，我们可以通过以下代码获取id为“demo”的元素：```javascriptvar demo = document.getElementById('demo');```1.2 getElementsByTagName该方法可以通过元素的标签名获取元素，返回值是一个HTMLCollection对象。

例如，我们可以通过以下代码获取所有的p 元素：```javascriptvar pList = document.getElementsByTagName('p');```1.3 getElementsByClassName该方法可以通过元素的class属性获取元素，返回值是一个HTMLCollection对象。

例如，我们可以通过以下代码获取所有class 为“demo”的元素：```javascriptvar demoList = document.getElementsByClassName('demo'); ```1.4 querySelector该方法可以通过CSS选择器获取元素，返回值是一个元素对象。

例如，我们可以通过以下代码获取第一个class为“demo”的p元素： ```javascriptvar demo = document.querySelector('p.demo');```1.5 querySelectorAll该方法可以通过CSS选择器获取多个元素，返回值是一个NodeList对象。

传智韩顺平 html+css+javascrtpt 课程笔记3(吐血整理)

javascript 3=============================================================================== 1.Dom（文档对象模型）编程简介DOM = Document Object Model(文档对象模型)，根据W3C的DOM规范，DOM是HTML 与XML的应用编程接口（API），它将整个页面映射为一个由层次节点组成的文件。

编程人员通过访问dom 对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。

2.html dom层次图dom编程的核心是各个dom 对象。

HTML DOM定义了访问和操作HTML文档的标准方法。

HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)，每个节点是一个HTML DOM内置对象。

3.BOM（浏览器对象模型）介绍通过使用BOM，可移动窗口、更改状态栏文本。

bom 是w3c 组织提出的，他建议所有的浏览器都应当遵循这样的设计规范。

可以说bom 和dom 关系密切, 相互影响，bom 为纲，dom为目，我们可以简单的理解，dom 是bom 中document的具体实现。

要求浏览器必须支持4.常用dom对象window对象window 对象表示一个浏览器窗口或一个框架。

在客户端JavaScript中，Window 对象是全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用。

注：在使用window对象的方法和属性的时候，可以不带window，如下window.alert(“韩顺平!”)等价于：alert(“韩顺平”)。

常用方法和属性：✧alert() 显示消息和一个确认按钮的警告框✧confirm() 显示消息以及确认按钮和取消按钮的对话框✧setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达式✧clearInterval() 取消由setInterval()设置的定时器✧setTimeout() 指定的毫秒数后调用一次函数或计算表达式✧clearTimeout() 取消由setTimeout()设置的定时器✧moveTo() 把窗口的左上角移动到一个指定的坐标✧moveBy() 可相对窗口的当前坐标把它移动指定的像素✧resizeBy() 按照指定的像素调整窗口的大小✧resizeTo() 把窗口的大小调整到指定的宽度和高度✧open() 打开一个新的浏览器窗口或查找一个已命名的窗口✧close() 关闭窗口✧closed 返回窗口是否已被关闭✧status 设置窗口状态栏的文本✧opener 返回对创建此窗口的窗口的引用✧onload 页面装载✧onunload 关闭窗口案例：一个js版用户登录系统，当用户输入顺平密码是123，就跳到第二个页面，5秒后，自动跳转到第三个页面。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML DOM简介
什么是DOM？
通过 JavaScript，您可以重构整个HTML文档。

您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。

这个入口，连同对HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

在1998 年，W3C 发布了第一级的DOM 规范。

这个规范允许访问和操作HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。

DOM 可被JavaScript 用来读取、改变HTML、XHTML 以及XML 文档。

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：
Core DOM
定义了一套标准的针对任何结构化文档的对象
XML DOM
定义了一套标准的针对XML 文档的对象
HTML DOM
定义了一套标准的针对HTML 文档的对象。

节点
根据DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
∙整个文档是一个文档节点
∙每个HTML 标签是一个元素节点
∙包含在HTML 元素中的文本是文本节点
∙每一个HTML 属性是一个属性节点
∙注释属于注释节点
Node 层次
节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树（或节点树）。

HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。

树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

下面这个图片表示一个文档树（节点树）：
文档树（节点数）
请看下面这个HTML文档：
上面所有的节点彼此间都存在关系。

除文档节点之外的每个节点都有父节点。

举例，<head> 和<body> 的父节点是<html> 节点，文本节点"Hello world!" 的父节点是<p> 节点。

大部分元素节点都有子节点。

比方说，<head> 节点有一个子节点：<title> 节点。

<title> 节点也有一个子节点：文本节点"DOM Tutorial"。

当节点分享同一个父节点时，它们就是同辈（同级节点）。

比方说，<h1> 和<p>是同辈，因为它们的父节点均是<body> 节点。

节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。

比方说，所有的文本节点都是<html>节点的后代，而第一个文本节点是<head> 节点的后代。

节点也可以拥有先辈。

先辈是某个节点的父节点，或者父节点的父节点，以此类推。

比方说，所有的文本节点都可把<html> 节点作为先辈节点。

本文作者：ghsau。