DOM介绍

什么是DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

DOM树

文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中所有标签都是元素,DOM中使用element表示
节点:网页中所有内容都是节点(标签,属性,文本,注释等),DOM中用node表示
DOM把以上内容都看作是对象

DOM树最顶端是document，BOM最顶端是window

文档（document）一个页面当成文档
元素（element）页面中所有标签元素
节点（node）网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），每个节点都是对象，都有属性和方法

DOM获取元素

获取方式	用法	返回值
根据Id获取	document.getElementById(‘id’)	返回指定id的元素对象，未找到返回null，存在多个id返回undefined
根据标签名获取	document.getElementsByTagName(‘标签名’)	返回的是指定标签的动态集合，是一个类数组对象，伪数组，但不是数组。可以通过下标索引访问
根据Name获取	document.getElementByName(‘name属性值’)	返回指定name的元素对象集合
根据ClassName获取（html5新增）	document.getElementByClassName(‘class属性值’)	返回指定classname的元素对象集合
根据选择器获取（新增）	document.querySelector(‘选择器’)	获取的是给定选择器元素，只能返回给定选择器第一个元素
根据选择器获取（新增）	document.querySelectorAll(‘选择器’)	获取的是给定选择器元素，返回元素的集合

document.getElementById() 根据Id获取

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

如果没有指定 ID 的元素返回 null
如果存在多个指定 ID 的元素则返回第一个。

示例如下

 <body><h3 id="hello">静夜思</h3><p id="hello"><span>床前明月光</span><span>疑是地上霜</span></p><p><span>举头望明月</span><span>低头思故乡</span></p><script>//如果存在多个指定 ID 的元素则返回第一个。var helloId=document.getElementById("hello");console.log(helloId)//没有指定ID元素hiId=document.getElementById("hi");console.log(hiId)</script></body>

document.getElementsByTagName() 根据标签名

getElementsByTagName() 方法可返回带有指定标签名的对象的集合,作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
示例如下

 <body><h3>静夜思</h3><p><span>床前明月光</span><span>疑是地上霜</span></p><p><span>举头望明月</span><span>低头思故乡</span></p><script>//返回一个伪数组var pTag = document.getElementsByTagName("p");console.log(pTag);//字符串不区分大小写var spanTag = document.getElementsByTagName("SPAN");console.log(spanTag)//*返回所有元素var tagAll = document.getElementsByTagName("*")console.log(tagAll)//因为返回的是NodeList 对象,我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。console.log(spanTag[3])</script></body>

document.getElementByName() 根据Name获取

getElementsByName() 方法可返回带有指定名称的对象的集合。作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

示例如下

 <body><h3 name="hello">静夜思</h3><p><span name="hi">床前明月光</span><span name="hi">疑是地上霜</span></p><p><span name="hi">举头望明月</span><span>低头思故乡</span></p><script>//根据name属性,返回一个伪数组var helloName = document.getElementsByName("hello");console.log(helloName);//多个同名namevar hiName = document.getElementsByName("hi");console.log(hiName)</script></body>

document.getElementsByClassName() 根据ClassName获取（html5新增）

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
多个类名使用空格分隔，如 “test demo”。

示例如下

 <body><h3 class="hello">静夜思</h3><p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p><p><span class="hi">举头望明月</span><span>低头思故乡</span></p><script>//根据class  Name  返回指定元素var ClassName = document.getElementsByClassName("hello");console.log(ClassName);//根据多个类名返回指定元素var classNames = document.getElementsByClassName("hi hello");console.log(classNames)</script></body>

document.querySelector() 根据选择器获取单个元素（新增）

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

示例

 <body><h3 class="hello">静夜思</h3><p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p><p><span class="hi">举头望明月</span><span>低头思故乡</span></p><script>//根据选择器返回指定元素var ClassName = document.querySelector(".hello");console.log(ClassName);//选择器选中多个元素,只返回第一个var classNames = document.querySelector(".hi");console.log(classNames)</script></body>

document.querySelectorAll() 根据选择器获取所有元素（新增）

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。
示例如下

 <body><h3 class="hello">静夜思</h3><p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p><p><span class="hi">举头望明月</span><span>低头思故乡</span></p><script>//根据选择器返回指定元素var ClassName = document.querySelectorAll(".hello");console.log(ClassName);//选择器选中多个元素,只返回第一个var classNames = document.querySelectorAll(".hi");console.log(classNames)</script></body>

document对象属性

方法	作用
document.body	返回文档的body元素
document.title	返回文档的title元素，表示页面的标题
document.documentElement	返回文档的html元素，即HTML页面的全部信息（通过此可以将文档全部元素放进一个字符串，供别人读取分析
document.froms	返回对文档中所有From对象引用，复数形式，可以返回多个表单
document.images	返回对文档中所有的image对象，与上述一样

document.body 设置或返回文档的body元素

body 属性用于设置或返回文档体。

如果是返回, 该属性返回当前文档的元素。
如果是设置, 该属性会覆盖所有在元素中的子元素, 并用新的内容来替换它。
示例如下

 <body><h3 class="hello">静夜思</h3><p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p><p><span class="hi">举头望明月</span><span>低头思故乡</span></p><script>//返回文档的body元素var documentBody = document.body;console.log(documentBody);</script></body>

document.title 返回或设置文档的title元素

title 属性可返回或设置当前文档的标题（ HTML title 元素中的文本）。
示例如下

 <body><h3 class="hello">静夜思</h3><p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p><p><span class="hi">举头望明月</span><span>低头思故乡</span></p><script>//返回文档的title元素var documentTitle = document.title;console.log(documentTitle);//设置title元素document.title = "你好";</script></body>

document.documentElement 返回文档的html元素

documentElement 属性以一个元素对象返回一个文档的文档元素。

HTML 文档返回对象为HTML元素。

示例如下

 <body><h3 class="hello">静夜思</h3><p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p><p><span class="hi">举头望明月</span><span>低头思故乡</span></p><script>//返回文档的html元素var documentHTML = document.documentElement;console.log(documentHTML);</script></body>

document.froms 返回对文档中所有From对象引用

代码	作用
document.forms	表示获取当前页面的所有表单
document.forms[0]	表示获取当前页面的第一个表单
document.forms[‘exportServlet’]	表示获取当前页面的name="exportServlet"的表单
document.forms[‘exportServlet’].username.value	获取表单为exportServlet，name为exportServlet的值
document.forms[0].submit	表示提交第一个form表单

document.forms[0].submit提交的地址即对应的action地址如果想要改变，可以使用document.forms[0].action = theUrl;

比如我们写一个提交可以这样

 <script>function dosubmit(theUrl) {document.forms[0].action = theUrl;document.forms[0].submit}<form action="subLogin" method="post"><a href="#" onclick="dosubmit('test.json')" /> 提交</form></script>

document.images 返回对文档中所有的image对象引用

images 集合返回当前文档中所有图片的数组。

WebAPI编程_DOM相关推荐

WebApi编程（一）-DOM
1.js组成基本语法掌握后,我们要学习DOM和BOM,页面交互功能 API: 就是一个接口,一些预定义的函数. 2.DOM(文档对象模型) 文档:一个页面就是一个文档,document 元素:网页中 ...
【前端学习-16】【day06】WebAPI编程/动画函数封装/回调函数/轮播图/自动播放/节流阀/返回顶部/筋斗云/触屏事件/触屏事件对象/
新增动画前进后退效果案例:轮播图 1.显示隐藏功能 2.动态生成小圆圈 3.排他思想 4.开始滚动 5.右侧按钮 6.克隆第一张图片 7.小圆圈跟着右侧按钮变化 8.序号和点击的要统一 9.左侧代码 ...
html5 本地文件系统,本地文件系统客户端存储 WebAPI编程 [HTML5知典]
本地文件系统首先要声明的是,这里的本地文件系统并不是客户端操作系统下的本地磁盘文件系统,而是Web应用程序在客户端创建和管理的一个与页面相关联的沙盒文件系统. 概述本地文件系统(Local Fil ...
前端学习第三阶段-第3章 WebAPI编程
3-1 API 和 Web API 01-Web APIs简介导读 02-js基础和Web APIs两个阶段的关联性 03-API 和 Web API 3-2 DOM介绍 04-DOM导读 05-DO ...
.NET Core 学习资料精选：入门
开源跨平台的.NET Core,还没上车的赶紧的,来不及解释了-- 本系列文章,主要分享一些.NET Core比较优秀的社区资料和微软官方资料.我进行了知识点归类,让大家可以更清晰的学习.NET Co ...
.NET项目迁移到.NET Core操作指南
这篇文章,汇集了大量优秀作者写的关于".NET迁移到.NET Core"资料文章以及微软官方教程文档.是我在迁移公司框架项目到.NET Core和.NET Standard时遇到的 ...
html5详细的中文手册,Web前端
课程主题 HTML5基础.CSS3基础.切图.综合项目:小U课堂.HTML5进阶. CSS3进阶.综合项目:小U商城.综合项目:响应式布局实战项目 PC端项目:小U课堂静态页面布局. 移动端项目:小 ...
html代码如何查看视频,Web前端
课程主题 HTML5基础.CSS3基础.切图.综合项目:小U课堂.HTML5进阶. CSS3进阶.综合项目:小U商城.综合项目:响应式布局实战项目 PC端项目:小U课堂静态页面布局. 移动端项目:小 ...
零基础如何学前端，如何规划？
一直以来,IT行业都是以高薪资.高福利赢得不少求职者的青睐,而对于WEB前端而言,亦是如此. 对于零基础学习前端的人总会有两个问题: 前端学习路线是什么? 在入门阶段,你首先要学会最基本的技能:根据U ...

WebAPI编程_DOM

DOM介绍

什么是DOM

DOM树

DOM获取元素

document.getElementById() 根据Id获取

document.getElementsByTagName() 根据标签名

document.getElementByName() 根据Name获取

document.getElementsByClassName() 根据ClassName获取（html5新增）

document.querySelector() 根据选择器获取单个元素（新增）

document.querySelectorAll() 根据选择器获取所有元素（新增）

document对象属性

document.body 设置或返回文档的body元素

document.title 返回或设置文档的title元素

document.documentElement 返回文档的html元素

document.froms 返回对文档中所有From对象引用

document.images 返回对文档中所有的image对象引用

WebAPI编程_DOM相关推荐

最新文章

热门文章