关于DOM的一些基础问题
什么是 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又有 ...
随机推荐
- python之特点
.python区分大小写:2.注释规范:python使用井号#作为单行注释,且注释的位置,一般放在要注释代码的前一行或这代码的右侧:多行注释则可以用连续三个单引号开始一行,并连续三个单引号在要注释的代 ...
- Vue--过滤器（私有和公有）
一.过滤器的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- jquery源码学习（一）——jquery结构概述以及如何合适的暴露全局变量
jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...
- httpserver支持路由传输控制器
main.go package main import ( "net/http" "com.jtthink.net/myhttpserver/core" ) t ...
- 手把手教你实现一个通用的jsonp跨域方法
什么是jsonp JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1 ...
- js中字符串的加密base64
base64编码主要用在传输,存储表示二进制的领域,还可以进行加密和解密.其实就是字符串的编码和解码 btoa与atob 只能加密ascii,不能加密汉字. var str = 'I LOVE YOU ...
- python KMP算法介绍
- oracle 数据库安全审计
Oracle的审计机制是用来监视用户对ORACLE数据库所做的各种操作. 在缺省情况下,系统的审计功能是关闭的.可以在INIT.ORA参数文件中将参数AUDIT_TRAIL设置为正整数来激活. 审计功 ...
- pl/sql基础知识—pl/sql块介绍
n 介绍 块(block)是pl/sql的基本成型单元,编写pl/sql程序实际上就是编写pl/sql块.要完成相对简单的应用功能,可能只需要编写一个pl/sql块:但是如果要想实现复杂的功能,可能 ...
- python已安装包的查看方法和requirements.text的使用
1.已经安装包的查看方法 命令pip freeze 2. 批量导出命令 pip freeze >requirements.txt 3. 批量导入命令 pip install -r requir ...