• 简介

　　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. Loadrunner安装与破解

    一.安装loadrunner 1. 点击setup.exe 2. 点击安装完整程序 3. 点击确定,安装必需程序 4. 安装vc2005的时候报了如下错,导致无法继续安装,没有报错可跳过第五步 5. ...

  2. LeetCode——39. 组合总和

    给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...

  3. 干货|微软远程桌面服务蠕虫漏洞（CVE-2019-1182）分析

    2019年8月,微软发布了一套针对远程桌面服务的修复程序,其中包括两个关键的远程执行代码(RCE)漏洞,CVE-2019-1181和CVE-2019-1182.与之前修复的"BlueKeep ...

  4. C# 互操作性入门系列(二)：使用平台调用调用Win32 函数

    好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...

  5. UML-设计模式-本地服务容错-代理模式

    在<本地服务容错-适配器+工厂模式>中,总是优先尝试本地服务.但是,有时候需要先尝试外部服务,然后才是本地服务.GoF的代理模式可以解决这个问题. 1.代理模式的一般结构 2.使用代理模式 ...

  6. 201771010123汪慧和《面向对象程序设计Java》第十六周实验总结

    一.理论部分 1.程序与进程的概念 ‐程序是一段静态的代码,它是应用程序执行的蓝本. ‐进程是程序的一次动态执行,它对应了从代码加载.执行至执行完毕的一个完整过程. ‐操作系统为每个进程分配一段独立的 ...

  7. python类(4)——自己造第一个轮子

    先做简单版本,再一步步增加功能 1.简单目的:要实现这样一个功能,能够连接服务器,登录账号,查询账号委托信息,如果有委托信息,撤销委托. 属性(不同账户之间差别):账户,密码 方法(不同账户之间都要用 ...

  8. 69.ORM查询条件：isnull和regex的使用

    首先查看数据库中的article表的数据: 定义模型的文件models.py中的示例代码如下: from django.db import models class Category(models.M ...

  9. delphi 单例模式

    unit Singleton; (* 单例模式适用于辅助类, 一般伴随于单元的生命周期 *) interface uses SysUtils; type TSingleton = class publ ...

  10. JDK的3个bug啊，你get到了吗？

    1.Annotation引用非空enum数组返回空数组 首次发现时的环境:JDK 1.8 首次发现所在项目:APIJSON 测试用例: publicenumRequestRole {/**未登录,不明 ...