关于前端Dom的总结

简介

　　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的总结的更多相关文章

Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
前端---DOM
一.介绍: http://www.cnblogs.com/wupeiqi/articles/5643298.html 什么是DOM? DOM字面意思是文档对象模型,DOM将网页内的元素与内容呈现为一个 ...
前端dom元素的操作优化建议
参考自:http://blog.csdn.net/xuexiaodong009/article/details/51810252 其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM ...
python学习之路前端-Dom
Dom简介文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为 ...
web前端 DOM 详解
先来点概念文档对象模型(DOM)是一个独立于语言的,使用 XML 和 HTML 文档操作的应用程序接口(API). 在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见. ...
前端——DOM
什么是DOM? DOM是W3C(万维网联盟)的标准,是Document Object Model(文档对象模型)的缩写,它定义了访问HTML和XML文档的标准: “W3C文档对象模型(DOM)是中立于 ...
前端 Dom 直接选择器
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
前端DOM知识点
DOM即文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本 ...
前端dom操作竟然使得http请求的时间延长了
最近在项目中遇到了一个奇怪的问题:在google浏览器的调试窗口network下看到一个请求的时间一直是2s多,但是当我把这个请求单独拿出来执行的时候发现根本用不了2s,100多毫秒就完成了.最后再不 ...

随机推荐

springboot (2.0以上)连接mysql配置
pom <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java&l ...
低JAVA版本，高兼容性启动
低JAVA版本,高兼容性启动背景:部分操作系统java环境低版本,暂时无法更新最新版本,新系统需要使用较高版本Java环境 1.JAVA低版本不兼容当前应用 2.解压安装JAVA,无需配置环境变量 ...
openstack trove 数据库镜像构建列表
文件位置:/trove/integration/scripts/files/elements ubuntu@ubuntu:~/Downloads/trove/integration/scripts/f ...
eclipse默认的WebContent目录修改为webRoot
从网上下载了个Java Web项目,导入Eclipse后在Tomcat中发布,发现在Tomcat的Webapps目录下没有JSP页面到项目中去看才发现有两个目录,一个WebContent,一个Web ...
CSU 1425 NUDT校赛 I题 Prime Summation
这个题本来有希望在比赛里面出了的当时也想着用递推因为后面的数明显是由前面的推过来的但是在计算的时候因为判重的问题 ...很无语.我打算用一个tot[i]来存i的总种树,tot[i]+=tot[ ...
题解 P1317 【低洼地】
题目这题挺简单的,没必要用数组 [分析] 需要判断的是低洼地的数量通过对题目中图进行分析,显然可以发现低洼地的定义: 若数组中存在一个数值相同的连续区间,这个区间端点外相邻两点的数值都大于该区间的 ...
jenkins job 杀进程不成功解决办法
jenkins_job #!/bin/bash set -ex #打印执行过程 BUILD_ID=DONTKILLME #防止自杀 ssh dataexa@192.168.1.65 > /dev ...
Cf水题B - Combination
地址: https://vjudge.net/problem/27861/origin Ilya plays a card game by the following rules. A player ...
TX2在Turtlebot测试kobuki
1.检查TX2开发板上的ROS,输入: $ roscore 如果ROS安装正确显示 started core service [/rosout] 2.输入检测kobuki 命令 ls /dev/kob ...
Centos配置NAT模式下的静态ip
一．查看所在的ip段点击编辑-->虚拟网卡编辑器选中vmware8网卡,点击 DHCP设置二．编辑网卡配置文件查看网卡 ip addr 命令打开配置文件 vi /etc/sysconf ...

关于前端Dom的总结

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

随机推荐

热门专题