• 简介

　　DOM (Document Object Model) 文档对象模型

　　DOM思想使用节点树(node tree)的概念来描述一个HTML页面，页面中的每一个元素、属性、文本都被认为是节点。此外，DOM还定义了一系列编程接口（DOM   API），用来操作页面的任意一部分内容

　　在 js + DOM编程中，一般的编程思路是这样的：由js基本语法控制程序的执行逻辑，由DOM API进行元素的查找获取，进而再对元素进行增删改等操作

  • 节点树
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <title></title>

</head>

<body>

    <a href="http://www.baidu.com">百度一下</a>

</body>

</html>

  • 节点类型

　　HTML页面中的主要节点有四种：文档节点、元素节点、属性节点、文本节点

　　DOM  API提供了一个Node父接口表示任意类型的节点，同时提供了两个子接口：Document、Element分别表示整个文档和元素节点(当然，还提供了其他类型的子接口，如DocumentType、Attr、Text等)

  • document对象

　　document对象是window对象的一个属性

　　document对象表示整个HTML页面，是DOM的核心对象

　　document对象是连接JavaScript和DOM的桥梁，使得我们可以在JavaScript环境中操作页面内容

　　document对象提供了查找获取元素节点的方法，所以document是DOM的编程入口，此外还提供了创建新节点的方法

  •  document获取元素

　　document对象提供了3个方法来查找获取想要的元素对象：

方法名

返回值

描述

getElementById(string)

Element

根据元素的id属性值获取元素

getElementsByTagName(string)

NodeList

根据元素的标签名获取元素

getElementsByName(string)

NodeList

根据元素的name属性值获取元素

　　NodeList操作

　　获取NodeList中包含的元素个数    nodeList.length

　　获取指定索引位置的元素nodeList.item(index)

　　注意：NodeList是动态更新的，即如果删除的元素也在NodeList里面，那么也同时从NodeList里面删除

  • document操作元素

　　创建元素、添加元素

　　document.createElement(tagName)      根据元素标签名称创建元素节点

　　appendChild(node)   添加子节点

　　注：如果一个元素原本就在页面中，appendChild会先把元素从原来的父元素删除，再追加到新的父元素中（因为要添加的那个节点不一定是新创建的，可能是获取到页面中的一个节点）

  • Element操作元素属性

　　直接使用element.attrName的方式操作属性值

　　以下方式只能操作HTML标准规定的属性，不能操作自定义属性

　　var  attrValue = element.attrName;//获取属性值

　　element.attrName =  attrValue;//给属性赋值

　　element.className;//获取和设置元素的class属性的值。因为class是关键字，所以操作class属性时使用className代替

　　在js中，操作checkbox、radio的checked属性，select的selected属性值时，使用true或false , 表单元素的disabled属性也是如此

　　通过方法操作属性

　　Element提供了3个方法来操作属性，而且可操作自定义属性

　　String  getAttribute(String  attrName) 获得属性值

　　void  removeAttribute(String  attrName) 删除指定属性

　　void  setAttribute(String  attrName, String  attrValue)   修改/添加属性

  • Element操作元素的子节点

　　子节点包括子元素和元素文本内容

　　element.getElementsByTagName()     根据子元素的标签名获取子元素

　　element.innerHTML         以字符串形式操作子节点

　　element.insertBefore(newNode,  node)    在指定子节点前插入新子节点

　　element.appendChild(newNode)    在最后追加子节点

　　element.parentNode  获取元素的父元素

　　也可以使用element.innerText （IE、chrome）或者element.textContent（火狐）操作元素的文本内容（文本内容可以写成html代码字符串），但有浏览器兼容问题。

  • Element操作元素样式

　　使用 element.style.propName 的方式可以直接操作某个样式属性。如：element.style.backgroundColor="gray"；

　　使用DOM和CSS操作元素样式的名称使用对比如下图

  • 删除元素内容

　　element.removeChild(node);   删除子节点

　　element.attrName  = null;    删除属性

　　element.innerHTML = null;  删除文本内容和子元素

  • DOM事件机制

　　通常的，当浏览器状态改变、用户操作时都会触发一些事件。如用户点击了一个按钮，就触发了按钮的点击事件，按钮称为事件源。

　　当一个事件被触发时，浏览器就会创建一个event事件对象，这个事件对象包含和此事件相关的各种信息，如点击事件的事件对象包含点击位置的信息，可供编程人员使用。

　　如果希望当一个事件发生时针对这个事件做一些处理，就需要给该事件注册一个事件处理函数，当该事件真的发生时，该处理函数就会被浏览器自动调用

　　常见的事件有以下几类：窗体事件、鼠标事件、键盘事件、焦点事件等

　　页面加载完成事件

　　操作页面元素的js代码一定要写到页面加载完成里面，否则可能会因为没有加载完成导致元素取不到。如下是事件的基本用法：

<script type="text/javascript">

        window.onload=function(){

            //只有页面加载完成，才可确保id为div01的元素被获取到

            var element = document.getElementById("div01");

            alert(element);

        }

</script>

　　注意：load是事件的名称，onload是元素的属性，用来给元素注册事件处理函数

　　鼠标事件

　　click、dblclick                      鼠标单击、双击时触发

　　mouseover、mouseout       鼠标指针进入、离开元素时触发

　　mousemove                        鼠标指针移动时触发（进入元素后）

　　mousedown、mouseup      鼠标按键按下、弹起时触发（进入元素后）

　　鼠标事件的event对象包含如下信息：

　　button                                      点击的哪个鼠标按键（0、1、2）

　　altKey、ctrlKey、shiftKey       点击时是否同时按下键盘的alt、ctrl、shift 键

　　clientX、clientY                       鼠标指针的窗口坐标

　　screenX 、screenY                 鼠标指针的屏幕坐标

　　处理事件的两种方式

　　1、通过DOM方式把事件处理函数赋值给事件属性（称为注册事件处理函数）

<script type="text/javascript">

        window.onload=function(){

               var element = document.getElementById("div01");

               element.onclick = function(){

                      alert("点我了");

               }

        }

</script>

　　2、直接在HTML元素标签的事件属性上写要执行的代码

<div onclick="alert('点我了');" ></div>

　　3、注意：如果有个自定义函数fun1，第一种方式的写法为element.onclick=fun1;而第二种方式的写法为onclick="fun1();"

  • this的使用
function fun1(){

       alert(this);

}

onload = function(){

       var obj = {"fun1":fun1 };//obj.fun1 = fun1;

       var btn = document.getElementById("btn");

       btn.onclick = fun1;

       window.fun1();   //Window

       obj.fun1();      //Object

       btn.onclick();   //HTMLInputElement

}

　　说明：如果this在函数fun1内，函数fun1以哪个对象的属性值的身份去执行，this就表示哪个对象。this的这个特性，很多时候非常有用，特别是在DOM的事件处理函数中

  • 给一个事件注册多个事件处理函数

　　注册事件处理函数的方式会覆盖直接编写处理代码的方式，而且同时注册的多个处理函数也会发生覆盖，这就导致一个事件发生时我们只能做"一件事情"

　　为了可以给一个事件注册多个事件处理函数，DOM提供了另外一种注册方式：

　　addEventListener(事件名称,  处理函数);

　　同时提供了一个删除处理函数的方法：

　　removeEventListener(事件名称, 处理函数);

　　也可以使用代码模拟触发一个事件，如btn.onclick();，其实这只是直接调用了事件处理函数

　　注意：多次注册同一个函数效果只有一次。如果希望将来可以删除某个注册的处理函数，就应该拿到该处理函数的引用

<script type="text/javascript">

        window.onload=function(){

            document.getElementById("div01").addEventListener("click",function(){

                alert(2);

            })

        }

</script>
  • 事件冒泡

　　由于HTML元素可嵌套，就不可避免的出现当用户执行一个动作如点击时，会有多个元素触发点击事件。为了方便管理不至于混乱，DOM提供了事件冒泡机制。

　　事件冒泡：当若干嵌套的元素"同时"被触发某个事件时，最内层元素的事件最先被触发，事件依次往外传递。

　　如果某刻希望取消该事件的冒泡，可以使用event.stopPropagation()

  • 键盘事件

　　keydown       键盘按键被按下

　　keyup            键盘按键被弹起

　　event事件对象的属性：

　　event.keyCode        被按下的按键的整数编码

<script type="text/javascript">

        window.onload=function() {

            document.onkeydown = function () {

                alert(event.keyCode);//获取按下键的整数编码

            }

        }

</script>
  • 取消浏览器的默认动作

　　对于某些元素的特点事件，浏览器会有一个默认的动作，如超链接触发点击事件时页面会跳转、表单提交事件被触发时表单数据会被提交到服务器、键盘按下在输入框中输入字符等

　　DOM提供了两种方式来取消浏览器的默认动作：在我们自己注册的处理函数中执行 event.preventDefault(); 或者return  false;

　　注意：取消事件的浏览器默认动作和取消事件冒泡是不同的概念

关于前端Dom的总结的更多相关文章

  1. Python之Web前端Dom, jQuery

    Python之Web前端: Dom   jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  2. 前端---DOM

    一.介绍: http://www.cnblogs.com/wupeiqi/articles/5643298.html 什么是DOM? DOM字面意思是文档对象模型,DOM将网页内的元素与内容呈现为一个 ...

  3. 前端dom元素的操作优化建议

    参考自:http://blog.csdn.net/xuexiaodong009/article/details/51810252 其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM ...

  4. python学习之路前端-Dom

    Dom简介    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为 ...

  5. web前端 DOM 详解

    先来点概念 文档对象模型(DOM)是一个独立于语言的,使用 XML 和 HTML 文档操作的应用程序接口(API). 在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见. ...

  6. 前端——DOM

    什么是DOM? DOM是W3C(万维网联盟)的标准,是Document Object Model(文档对象模型)的缩写,它定义了访问HTML和XML文档的标准: “W3C文档对象模型(DOM)是中立于 ...

  7. 前端 Dom 直接选择器

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  8. 前端DOM知识点

    DOM即文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本 ...

  9. 前端dom操作竟然使得http请求的时间延长了

    最近在项目中遇到了一个奇怪的问题:在google浏览器的调试窗口network下看到一个请求的时间一直是2s多,但是当我把这个请求单独拿出来执行的时候发现根本用不了2s,100多毫秒就完成了.最后再不 ...

随机推荐

  1. 【STM32H7教程】第48章 STM32H7的FMC总线应用之是32路高速IO扩展

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第48章       STM32H7的FMC总线应用之是32路 ...

  2. UNION和UNION ALL的作用和语法

    主要就是两句话区别: union是联合的意思,就是合并两个或多个select语句的结果集,并消除重复行: union all 当然也是联合的意思,也是合并两个或多个select语句的结果集,但是保留重 ...

  3. Elasticsearch分布式搜索

    ElasticSearch之介绍 一 Elasticsearch产生背景 1.1 大规模数据如何检索 如:当系统数据量上了10亿.100亿条的时候,我们在做系统架构的时候通常会从以下角度去考虑问题:1 ...

  4. 2020/2/12 PHP编程学习

    感冒终于差不多好了.. 学了一天的tp框架商城开发,到此,一个小商城算是开发完了,写一个简单小总结吧233 首先说的编程方面,其实并没有质的提升orz,怎么可能几天就有大突破233 不过收获还是有的, ...

  5. POJ - 3662 Telephone Lines （dijstra+二分）

    题意:有N个独立点,其中有P对可用电缆相连的点,要使点1与点N连通,在K条电缆免费的情况下,问剩下的电缆中,长度最大的电缆可能的最小值为多少. 分析: 1.二分临界线(符合的情况的点在右边),找可能的 ...

  6. 每天一点点之vue框架开发 - axios拦截器的使用

    <script> import axios from 'axios' export default { name: 'hello', data () { return { msg: 'We ...

  7. ref与out区别

    ref与out   out.ref都是传递引用(内存地址),使用后都将改变原来参数的数值.   ref 当调用方法时,在方法中会对ref传入的参数数值进行改变,若使用ref参数,则方法定义和调用方法都 ...

  8. sping中 各种注解——@SuppressWarnings注解用法

    @SuppressWarnings注解用法 @SuppressWarnings注解主要用在取消一些编译器产生的警告对代码左侧行列的遮挡,有时候这会挡住我们断点调试时打的断点. 如图所示: 这时候我们在 ...

  9. 吴裕雄--天生自然 JAVASCRIPT开发学习： 表单验证

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. JAVA课程设计——俄罗斯方块（团队）

    1.团队介绍 1.1 团名:终于可以回家了嗷嗷嗷 1.2 团员介绍 2.参考来源 https://www.jb51.net/article/142716.htm 3.项目git地址 https://g ...