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.childNodes

            for(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.value

            oUl1.appendChild(oLi)

        }

        oUl1.onclick = function(ev){

            var ev = ev || event

            if(ev.target.nodeName == "LI"){

                ev.target.style.backgroundColor = "red"

            }

        }

    </script>

</body>

</html>

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

DOM-BOM-EVENT（1）的更多相关文章

  1. BOM基础（四）

    最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容 ...

  2. DOM 事件深入浅出（二）

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  3. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  4. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  5. c#中的delegate（委托）和event（事件）

    c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...

  6. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  7. DOM学习笔记（二）对象方法与属性

    所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...

  8. DOM之事件（一）

    DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件.它是用户和页面交互的核心.当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实 ...

  9. DOM的概念（1）

    什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...

  10. JavaScript DOM学习总结（一）

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

随机推荐

  1. Java实现 LeetCode 421 数组中两个数的最大异或值

    421. 数组中两个数的最大异或值 给定一个非空数组,数组中元素为 a0, a1, a2, - , an-1,其中 0 ≤ ai < 231 . 找到 ai 和aj 最大的异或 (XOR) 运算 ...

  2. Java实现 LeetCode 88 合并两个有序数组

    88. 合并两个有序数组 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元 ...

  3. Mybatis多表操作

    一:引言 在学习完前面的mybatis基本语法后,大家都有个认知,这个Mybatis太强大了,比之前使用JDBC写方便多了,但是你们当初在使用原生JDBC写SQL查询的时候有没有遇到过多表查询呢?肯定 ...

  4. http1.0 、http1.1和http2.0的区别

    一.HTTP1.0 HTTP 1.1主要区别       1.1 长链接             HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支 ...

  5. 基于Azure IoT开发.NET物联网应用系列-全新的Azure IoT架构

    物联网技术已经火了很多年了,业界各大厂商都有各自成熟的解决方案.我们公司主要搞新能源汽车充电,充电桩就是物联网技术的最大应用,车联网.物联网.互联网三网合一.2017年的时候重点研究过Azure Io ...

  6. css3图片防止变形

    1.object-fit 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐. 之前我们大多数用的 大多数都是利用background-size: cover 来避免对图片造 ...

  7. 白嫖永久免费云服务器教程，永久免费虚拟主机、永久免费云数据库、搭建FTP服务器、服务器安装Linux / windows操作系统、服务器部署网站、宝塔一键部署多网站、独立ip、永久国内高速云服务器

    一.准备工作 1. 注册账号 声明:切记不可用服务器做违法的事情 申请地址:https://www.sanfengyun.com/ 图文教程地址:https://www.cnblogs.com/zwn ...

  8. 微信小程序生命周期，事件

    目录 双线程模型 小程序中 app.js 中的生命周期 小程序的页面的生命周期 小程序的事件 双线程模型 像 Vue 的双向数据绑定 总结: 在渲染层将wxml文件与wxss文件转成js对象,也就是虚 ...

  9. php实现登录失败次数限制

    需求:同一个账号在同一个IP地址连续密码输错一定次数后,这个账号是会被锁定30分钟的. 实现思路: 需要一个表(user_login_info)负责记录用户登录的信息,不管登录成功还是失败都记录.并且 ...

  10. Django自定义500的错误显示信息

    这个方法应该对Django version 2.2.4以后的版本都有效,因为我的项目是这个版本,其他版本我并没有测试. 首先找到Django的exception.py文件路径:  C:\python_ ...