1.DOM简介

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

<html>
<head><title>My Document</title>
</head>
<body><h1>Header</h1><p>Paragraph</p>
</body>
</html>

1.1.DOM和JavaScript

DOM是一套标准编程接口，可以用JavaScript来访问，可以对文档结构进行改变，例如：可以设置内容，可以修改样式，但是，DOM并不是JavaScript的一部分，也可以用其他语言来使用

1.2.ECMAScript 和 JavaScript 的关系

JavaScript的创造者为 Netscape 公司，它们将JavaScript 提交给国际标准化组织 ECMA(前身为欧洲计算机制造商协会)，希望这种语言能够成为国际标准，1967年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，因此，ECMAScript是JavaScript的规格，JavaScript是ECMAScript的实现，在日常场合是可以互换的，就像汉语中的普通话，以北京语音为标准因，以北方方言为基础方言，制定了一套标准，在实际生活中会出现各种方言普通话，例如：四川普通话带点儿四川方言，山西普通话、山东普通话…

1.3.BOM/DOM/Node/W3C/CommonJs/ECMAScript

ECMAScript规范中，包含了词法、类型、上下文、表达式、声明、方法、对象等语言的基本要素
在实际应用中，JavaScript的表现能力取决于宿主环境中的API支持程度，例如：BOM、DOM提供的API，可以让JavaScript具有操作页面元素、修改元素样式、打开某个窗口等能力
浏览器就是JavaScript的宿主环境，BOM和DOM在浏览器端，由W3C标准组织来规范
在Node环境中，根据CommonJS规范，让JavaScript拥有了更多的能力，例如：文件操作、数据库操作、网络传输等，因此，JavaScript也可以用来做后台开发

1.4.DOM节点

1.4.1.什么是节点？

DOM 节点是指在HTML、XML文档中的每个成分都是一个节点。整个文档就是一个文档节点，每个HTML、XML标签是一个元素节点。

1.4.2.节点之间的关系

根节点（祖先节点）: HTML 父节点：相对于子节点来说的，当某个节点包含了子节点，这个节点就是其子节点的父节点子节点：相对于父节点来说的，某个元素下的所有节点，称为这个元素的子节点兄弟节点：当两个节点处于同一个父节点下，这两个节点可以互称兄弟节点注意：兄弟节点可以有多个，父节点只有一个，根节点为html，是祖先节点，也只有一个

1.4.3.节点类型

nodeType 属性表示节点类型，用来区分不同类型的节点，例如：文本、元素、注释等

语法：

var type = node.nodeType;

<div id="box">螺钉课堂</div>
<script>var oDiv = document.getElementById("box")console.log(oDiv.nodeType)
</script>

节点类型通常在过滤节点的时候，用来做判断，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#wrap div{width: 50px;height: 50px;background-color: #009f95;margin-bottom: 20px}</style>
</head>
<body><button id="btn">点击</button><div id="wrap"><div>1111</div><div>1111</div><div>1111</div><div>1111</div><div>1111</div></div><script>var oWrap = document.getElementById("wrap")var oBtn = document.getElementById("btn")oBtn.onclick = function(){var aNodes = oWrap.childNodesfor(var i=0;i<aNodes.length;i++){if(aNodes[i].nodeType == 1){aNodes[i].style.backgroundColor = "red"}}}</script>
</body>
</html>

1.4.4.节点名字

可以通过nodeName获取节点的名字，具体应用实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><input type="text" id="ipt"> <button id="btn">添加</button><ul id="ul1"><li>1111</li></ul><script>var oBtn = document.getElementById("btn")var oIpt = document.getElementById("ipt")var oUl1 = document.getElementById("ul1")oBtn.onclick = function(){var oLi = document.createElement("li")oLi.innerHTML = oIpt.valueoUl1.appendChild(oLi)}oUl1.onclick = function(ev){var ev = ev || eventif(ev.target.nodeName == "LI"){ev.target.style.backgroundColor = "red"} }</script>
</body>
</html>

螺钉课堂视频课程地址：http://edu.nodeing.com

DOM-BOM-EVENT（1）相关推荐

js(Dom+Bom)第六天（1）
webAPI 01-键盘事件知识点-onkeydown事件[掌握] onkeydown: 当键盘上的键被按下时候触发的一个事件知识点-onkeyup事件[掌握] onkeyup: 键盘上键弹起时候 ...
day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
DOM 事件深入浅出（二）
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
初读JavaScript DOM编程艺术（一）
JavaScript DOM编程艺术--前三章概念总结一. 概述 1.什么是JavaScript 2.什么是DOM 二. JavaScript 语法 1. 语句和注释 2. 变量和数组三. DOM ...
angular4点击事件监听_JavaScript从零开始——DOM事件编程（1）
事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现.DOM 支持大量的事件,本章开始,我们一起看看 DOM 的事件编程. 1 概念 DOM 的事件操作(监听和触发),都定义在Eve ...
el-table click事件多次触发_JavaScript从零开始——DOM事件编程（1）
事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现.DOM 支持大量的事件,本章开始,我们一起看看 DOM 的事件编程. 1 概念 DOM 的事件操作(监听和触发),都定义在Eve ...
DOM学习笔记（pink）
什么是API? 官方定义:一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节.(联想到黑盒测试会用就行,不必纠结内部 ...
《DOM编程艺术》中CSS—DOM的总结（一）
前言:前面是纯总结,后面实现了一个用DOM改变样式的Demo. -------------------开始------------------------- 1.元素节点的style属性 HTML文档 ...
【javascript】JS+DOM实现图片库（改进版）
一.它支持平稳退化吗 <li><a href="images/fireworks.jpg" onclick="showPic(this); return ...
DICOM：剖析Orthanc中的Web Server，Mongoose之 Flag bit Event（三）
背景: Orthanc是本专栏中介绍过的一款新型DICOM服务器,具有轻量级.支持REST的特性,可将任意运行Windows和Linux系统的计算机变成DICOM服务器,即miniPACS.Ortha ...

DOM-BOM-EVENT（1）