Javascript——DOM简介
DOM —— 文档对象模型
-
文档对象模型（document object model），一套操作页面元素的API。DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作。
-
DOM树
- 文档：一个网页可以称为文档
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
- 元素：网页中的标签
- 属性：标签的属性
-
DOM 经常进行的操作
-
获取元素
-
调用document对象的getElementById方法根据id获取元素。
-
调用document对象的getElementByTagName方法根据标签名获取元素。返回值是同名元素对象组成的数组。该方法获取的元素是动态增加的。
-
调用document对象的getElementByName方法根据name获取元素。（IE和Opera会有兼容问题，建议使用选中id方法）
-
调用document对象的getElementByClassName方法根据类名获取元素。不支持IE8一下的浏览器。
-
调用document对象的querySelector方法根据选择器获取元素。通过css中的选择器去选取第一个符合条件的标签元素。
-
querySelectorAll可以选取所有符合条件的标签元素。
不支持IE8以下的浏览器
-
-
-
对元素进行操作
-
动态创建元素
-
事件
-
事件：在什么时候做什么事。
-
执行机制：触发响应机制
-
绑定事件/注册事件三要素：
①事件源：给谁绑定事件
②事件类型：绑定什么类型的事件，如：click单击事件
③事件函数：事件发生后执行什么，函数
-
事件监听
-
Javascript解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只有触发对应的绑定事件，会立刻执行事件函数。
-
常用监听方法：
①绑定HTML元素属性
②绑定DOM对象属性
-
-
-
获取标签内部内容的属性
- innerHTML 和 innerText属性
- innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。
- innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。
- 两个属性还可以给双标签内部更改内容；innerHTML按照HTML语法中的标签加载；innerText按照普通字符加载。
-
表单元素属性
- value 用于大部分表单元素的内容获取（option除外）
- type 获取input标签的类型（输入框或复选框等）
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
- DOM中元素对象的属性值只有一个时，会被转成布尔值显示。（txt.disabled = true;）
-
自定义属性操作
- getAttribute(name) 获取标签行内属性
- setAttribute(name,value) 设置标签行内属性
- removeAttribute(name) 移除标签行内属性
- 三个方法可以获取任意行内属性，包括自定义的属性
-
style样式属性操作
- style属性方式设置的样式显示在标签行内
- element.style属性的值，是所有行内样式组成的一个样式对象
- 通过样式属性设置width、height等属性时，记得加上"px"。
-
className类名属性操作
- 修改元素的className属性相当于直接修改标签的类名
-
-
DOM节点操作
-
节点属性
-
nodeType 节点类型，属性值数字，共12种。
1 元素节点
2 属性节点
3 文本节点
-
nodeName 节点名称（标签名称），只读
-
nodeValue 节点值，返回或设置当前节点的值。元素节点的nodeValue始终是null
-
-
父子节点常用属性
- childNodes 只读属性，获取一个节点所有子节点的实时集合（动态变化的）
- children 只读属性，返回一个节点所有的子元素节点集合，是一个动态更新的HTML元素集合
- firstChild 只读属性，返回该节点的第一个子节点，如果该节点没有子节点返回null
- lastChild 只读属性，返回该节点的最后一个子节点，如果该节点没有子节点返回null
- parentNode 返回一个当前节点的父节点，如果没有这样的节点，返回null
- parentElement 返回当前节点的父元素节点，如果没有父节点或者父节点不是一个DOM元素，返回null
-
兄弟节点常用属性
- nextSibling 只读属性，返回与该节点同级的下一个节点，没有则返回null
- previousSibling 只读属性，返回与该节点同级的上一个节点，没有则返回null
- nextElementSibling 只读属性，返回与该节点同级的下一个元素节点，没有则返回null（IE9 以后支持）
- previousElementSibling 只读属性，返回与该节点同级的上一个元素节点，没有则返回null（IE9 以后支持）
-
创建新节点
- document.creatElement("div") 创建元素节点
- document.creatAttribute("id") 创建属性节点
- document.creatTextNode("this is text") 创建文本节点
- 将创建的新节点存在变量中，方便使用
-
节点常用操作方法
-
parentNode
①parentNode.appendChild(child) : 将节点child添加到指定的父节点parentNode的子节点列表末尾
②parentNode.replaceChild(newChild,oldChild) ：用指定的节点newChild替换当前节点的一个子节点oldNode，并返回被替换掉的节点
③parentNode.insertBefore(newNode,referenceNode) ：在参考节点referenceNode之前插入一个拥有指定父节点的子节点，referenceNode必须设置，如果referenceElement为null则newNode将被插入到子节点末尾
④parentNode.removeChild(child) ：移除当前节点的一个子节点child，这个节点必须存在于当前节点中
-
Node.cloneNode()：克隆一个节点，可以选择是否克隆这个节点下的所有内容。参数为Boolean，表示是否采用深度克隆，true 则表示该节点的所有后代节点都会被克隆；false 表示只克隆该节点本身。默认值是true。
（注意克隆时，标签上的属性和属性值也会被复制，写在标签行内的绑定事件可以被复制，但是javaScript动态绑定的事件不会被复制）
-
Node.contains(child)：传入节点是否为该节点的后代节点，返回布尔值
-
判断当前节点是否有子节点：
- Node.hasChildNodes()：是否包含有子节点，返回一个布尔值，没有参数
- node.childNodes.length > 0
- node.firstChild !== null
-
-
注册事件
-
element.addEventListenere(事件类型，事件函数)，不支持IE9以下
同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
-
element.attachEvent(on+事件类型，事件函数) ，只支持IE10及以下的浏览器
-
综上，注册事件的兼容写法
自定义一个注册事件函数
//兼容所有浏览器的解除绑定事件的函数` //参数：事件源，事件类型，事件函数 function deleEvent(ele,type,fun){ //浏览器能力检测 if(ele.removeEventListener){ ele.removeEventListener(type,fun); }else if(ele.detachEvent){ ele.detachEvent("on" + type,fun); } }
-
-
移除事件
- element.removeEventListener(事件类型，事件函数引用名)，注意，这里没有办法移除一个匿名函数，所以注册事件时需要单独声明一个有函数名的事件函数。不支持IE9以下
- element.detachEvent(on+事件类型，事件函数引用名)，只支持IE10以下
- 综上，移除事件的兼容写法
//兼容所有浏览器的绑定事件的函数 function addEvent(ele,type,fn){ //IE9及以上使用addEventListener ，IE9以下就使用addEvent //判断浏览器 浏览器能力检测 if(ele.addEventListener){ ele.addEventListener(type,fn); }else if(ele.attachEvent){ ele.attachEvent("on" + type,fn); } }
-
