什么是 DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准，全称是文档对象模型（Document Object Model）。

DOM 定义了访问文档的标准：

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

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

HTML DOM Document 对象

文档对象代表您的网页。如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

方法

document.getElementById(name) 通过css选择器的id来查找元素（id是唯一的，所以只返回一个元素，如果错误的用了多个id，那只返回第一个）。
document.getElementsByTagName(name) 通过标签名来查找元素（返回所有的后代节点中该标签名的元素，找不到返回null）
document.getElementsByClassName(name) 通过类名来查找元素（返回所有的后代节点中该类名的元素，找不到返回null）
element.attribute = "属性值" 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = '属性值' 改变 CSS样式值（注意用单引号）
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流（重新输出整个网页）
document.createTextNode(text) 创建文本节点，向一个元素添加文本时，必须首先创建文本节点。
element.insertBefore(para, child) 在child节点前面添加para节点。

HTMLCollection 并非数组！
它是document.getElementsByTagName(name)和document.getElementsByClassName(name)的返回值。
length 属性定义了 HTMLCollection 中元素的数量
您能够遍历列表并通过数字引用元素（就像数组那样）
不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。

属性

document.innerHTML，可用于获取或替换 HTML 元素的内容。
document.baseURI 返回文档的绝对基准 URI
baseURI 是一个 DOMString ，代表当前节点所在文档的基 URI 。如果无法获取则可能返回 null 。该值是只读的，随时变化的。
document.body 返回 <body> 元素
document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype
document.documentElement 返回 <html> 元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的 URI
document.domain 返回文档服务器的域名
document.embeds 返回所有 <embed> 元素
document.forms 返回所有 <form> 元素
document.head 返回 <head> 元素
document.images 返回所有 <img> 元素
document.implementation 返回 DOM 实现
document.inputEncoding 返回文档的编码（字符集）
document.lastModified 返回文档更新的日期和时间
document.links 返回拥有 href 属性的所有 <area> 和 <a> 元素
document.readyState 返回文档的（加载）状态
document.referrer 返回引用的 URI（链接文档）
document.scripts 返回所有 <script> 元素
document.strictErrorChecking 返回是否强制执行错误检查
document.title 返回 <title> 元素
document.URL 返回文档的完整 URL

通过 CSS 选择器查找 HTML 元素

document.querySelectorAll("p.intro") 返回所有class="intro"的p元素，CSS 选择器包括（id、类名、类型、属性、属性值等等）
不适用于 Internet Explorer 8 及其更早版本。
document.querySelector(selectors) 返回匹配到的第一个元素。selectors包含一个或多个要匹配的选择器的 DOM字符串DOMString。该字符串必须是有效的CSS选择器字符串。
但是不能匹配伪元素伪类。如果用了，不会返回任何东西。
如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。
由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：

console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\\\bar') // 匹配第一个div元素

document.querySelector('#foo:bar') // 不匹配任何元素
document.querySelector('#foo\\:bar') // 匹配第二个div

选择器也可以非常强大，如以下示例所示.

这里, 一个class属性为"user-panel main"的div元素<div>(<div class="user-panel main">)内包含一个name属性为"login"的input元素<input> (<input name="login"/>) ，如何选择，如下所示:

var el = document.querySelector("div.user-panel.main input[name='login']");

利用JavaScript实现简单动画：
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);//间歇调用，它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或页面被卸载.
//超时调用 setTimeout(frame, 5) 指定时间后调用函数一次，返回数值ID，表示超时调用，clearInterval(id)可以取消调用。
function frame() {
if (pos == 350) {
clearInterval(id);//取消间歇调用
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>

HTML属性值实现简单变化
<div
style="background-color: red; border: none; width: 150px; height: 60px; float:left; padding: 20px; font-size: 25px; color: #fff;"
onmouseover="this.innerHTML='谢谢您！'"
onmouseout="this.innerHTML='鼠标移上来！'"
>鼠标移上来！
</div>

JavaScript实现简单变化

<div
style="background-color: red; border: none; width: 150px; height: 60px; float:left; padding: 20px; font-size: 25px; color: #fff;"
onclick="clickMe(this)"
>点击我</div>
<script type="application/javascript">
function clickMe(obj) {
if (obj.innerHTML == "点击我") {
obj.innerHTML = "点击我<br>再次点击我";
return;
}
if (obj.innerHTML == "点击我<br>再次点击我") {
obj.innerHTML = "谢谢您";
return;
}
if (obj.innerHTML == "谢谢您") {
obj.innerHTML = "再见";
return;
}
if (obj.innerHTML == "再见") {
obj.style.display = "none";
return;
}
}
</script>

事件

document.getElementById("myBtn").onclick = function() { }; 点击事件,执行后面的函数。

onload 和 onunload 事件
当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。

onchange 事件
经常与输入字段验证结合使用。
<input type="text" id="fname" onchange="upperCase()">当用户改变输入字段内容时，会调用 upperCase() 函数。

onmouseover 和 onmouseout 事件
可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数。

首先当鼠标按钮被点击时，onmousedown 事件被触发；
然后当鼠标按钮被释放时，onmouseup 事件被触发；
最后，当鼠标点击完成后，onclick 事件被触发。

onfocus
当输入字段获得焦点时触发。

addEventListener() 方法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
（注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。）

JavaScript HTML DOM 导航

parentNode 父节点
childNodes[nodenumber] 第几个子节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点

firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性
所以为了准确地找到相应的元素，会用
firstElementChild,lastElementChild,nextElementSibling,previousElementSibling兼容的写法，这是JavaScript自带的属性。

文本节点的值能够通过节点的 innerHTML 属性进行访问：
var myTitle = document.getElementById("demo").innerHTML;
访问 innerHTML 属性等同于访问首个子节点的 nodeValue：
var myTitle = document.getElementById("demo").firstChild.nodeValue;
也可以这样访问第一个子节点：
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 等同于标签名（大写）
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document

nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值

最重要的 nodeType 属性是：
节点类型例子
ELEMENT_NODE 1 <h1 class="heading">W3School</h1> （元素）
ATTRIBUTE_NODE 2 class = "heading" （属性）（在 HTML DOM 中已弃用。XML DOM 中未弃用。）
TEXT_NODE 3 W3School （文本）
COMMENT_NODE 8  （注释）
DOCUMENT_NODE 9 HTML 文档本身（<html> 元素的父文档）
DOCUMENT_TYPE_NODE 10 <!Doctype html> （文档类型）

关于DOM的一些基础问题的更多相关文章

Dom探索之基础详解
认识DOM DOM级别注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型注:1 ...
深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
DOM操作（基础版）
DOM操作(基础版) DOM是document Object Model的缩写,简称文档对象模型.只要记住这是操作文档的就行了. DOM基础选择器 1.getElementById(id); //获取 ...
JAVA与DOM解析器基础学习笔记
要求必备知识 JAVA基础知识.XML基础知识. 开发环境 MyEclipse10 资料下载源码下载文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的 ...
DOM动画效果基础入门
一.什么是DOM? Document Object Model文档对象模型当创建一个网页并把它加载到web浏览器中时,如果没有document(文档): DOM根据你编写的网页文档创建一个文档对象 ...
js基础例子dom+原型+oop基础知识记录01
//oo:概念是计算机中对于现实世界的理解和抽象的方法 //由计算机利用编程技术发展到现在的产物 //面向对象几要素 //对象:由属性和方法组成的集合 //属性:保存数据,存储在对象内存空间中的唯一的 ...
JS操作DOM对象——JS基础知识（四）
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象处理网页内容的方法和接口 (3)BOM(浏览器 ...
DOM系统学习-基础
DOM介绍 DOM介绍: D 网页文档 O 对象,可以调用属性和方法 M 网页文档的树型结构节点: DOM将树型结构理解为由节点组成. 节点种类: 元素节点.文本节点.属性节点等查找元 ...
dom与jq基础使用
js有两种运行环境,一个是浏览器,一个是服务器(NodeJS) js的本质是es,因为运行环境的不同,为了操作环境内的api做了升级在浏览器上js分为es + dom + bom 在服务器上js又有 ...

随机推荐

golang在import自己的包报错问题
原因:使用git clone项目后,项目根路径是小写英文名称,比如cmdbapi,但是项目里面的import导入自己的相关包时,红色报错解决:把项目名称改写成import导入包的名称,即cmdbAp ...
Spring_Hibernate
Spring与Hiberante整合通过hibernate的学习,我们知道,hibernate主要在hibernate.cfg.xml配置文件中接下来我们看一下hibernate的一个配置文件 h ...
JavaScript 防抖和节流
1. 概述 1.1 说明在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可.有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以 ...
MaxCompute 助力衣二三构建智能化运营工具
摘要:本文由衣二三CTO程异丁为大家讲解了如何基于MaxCompute构建智能化运营工具.衣二三作为亚洲最大的共享时装平台,MaxCompute是如何帮助它解决数据提取速度慢.数据口径差异等问题呢?程 ...
PLUTO平台是由美林数据技术股份有限公司下属西安交大美林数据挖掘研究中心自主研发的一款基于云计算技术架构的数据挖掘产品，产品设计严格遵循国际数据挖掘标准CRISP-DM（跨行业数据挖掘过程标准），具备完备的数据准备、模型构建、模型评估、模型管理、海量数据处理和高纬数据可视化分析能力。
http://www.meritdata.com.cn/article/90 PLUTO平台是由美林数据技术股份有限公司下属西安交大美林数据挖掘研究中心自主研发的一款基于云计算技术架构的数据挖掘产品, ...
软件测试 → 第二章基础-> 软件缺陷与缺陷管理
一.缺陷定义与分类 1.1.软件缺陷定义:在软件工程整个生命周期中任何背离需求.无法正确完成用户所要求的功能的问题,包括存在于组件.设备.或系统软件中因异常条件不支持而导致系统失败等都属于缺陷. 从 ...
使用vscode书写markdown文件
插件推荐 markdown-preview-enhanced 打开 vscode 编辑器,在插件页搜索 markdown-preview-enhanced,接着点击 Install 按钮. 该插件的中 ...
Facebook POP 进阶指南
本文转自Kevin Blog Facebook 在发布了 Paper 之后,似乎还不满足于只是将其作为一个概念性产品,更进一步开源了其背后的动画引擎 POP,此举大有三年前发布的 iOS UI 框架 ...
为什么要Code Review
刚才专注看了下zwchen的博客,读到Code Reivew这一篇,觉得自己也了说话的冲动. 我们Team实施Code Reivew近5年,到今天,我们的结论是: Code Review是我们项目成功 ...
2019-8-31-C#-循环的判断会进来几次
title author date CreateTime categories C# 循环的判断会进来几次 lindexi 2019-08-31 16:55:58 +0800 2018-06-14 0 ...

关于DOM的一些基础问题