普歌-智音团队-DOM 入门基础
一.什么是DOM?
- DOM是document Object Model的缩写,简称文档对象模型。他给文档提供了一种结构化的表示方式,可以改变文档的内容和呈现方式;
- DOM可以用来处理html的程序接口,DOM把网页和脚本以及其他的编程语言联系了起
二.DOM之获取页面元素
1.getElementById(id) //获取指定元素的ID元素
2.getElementsByTagName() //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组
3.getElementsByName() //通过name值获取元素,返回值是数组,通常用来获取有name的input的值
4.getElementsByClassName() //通过class名获取元素,返回值是数组n
注意:1.不是所有标签都有name值;2.在低版本的浏览器中,getElementsByName和getElementsByClassName有兼容性
代码示例:
三.DOM之操作元素的属性
1.事件三要素:事件源;事件类型;事件处理程序
2.DOM属性的基本操作(增/删/改/查)
3.tagName //返回值是当前元素的标签名
innerHTML/innerText //返回值是当前元素的内容
id //返回值是当前元素的ID
title //获取title的标签值,这个title是从document中获取的
className //返回值是当前元素的class
href //返回值是当前的href的值
getAttribute() //获取 元素的属性
setAttribute() //设置/修改 元素的属性,低版本的IE不兼容;接收两个参数,属性名和属性值
removeAttribute() //删除 元素的属性,低版本的IE不兼容
代码示例:
事件的三要素
innerText和innerHTML区别 inneerHtmL识别html标签 可以保留空格和换行
四.操作DOM节点
- 根据DOM规定,HTML文档中的每个成分都是一个节点。
DOM是这样规定的:
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
2.获取DOM节点
对象.parentNode //获得父元素节点
对象.children //获得子元素节点的集合,不包含空白节点
对象.childNodes //获得所有子节点的集合,包括空白节点
对象.childNodes //获取当前元素节点的所有子节点
对象.ownerDocument //获取该节点的文档根节点,相当与 document
对象.firstChild //获得第一个子节点。(IE7/8非空白节点,可能是注释节点)
对象.firstElementChild //获得第一个非空白的子节点。(IE7/8不支持)
对象.lastChild //获得最后一个子节点(IE7最后一个元素节点,IE8最后一个非空白节点,可能是注释节点)
对象.lastElementChild //获得最后一个非空白的子节点。(IE7/8不支持)
对象.nextSibling //获得下一个兄弟节点。(包含空白节点和注释,IE7/8包括注释节点,不包括空白节点)
对象.nextElementSibling //获得下个兄弟节点。(IE7/8不支持)
对象.previousSibling //获得上一个兄弟节点。(包含空白节点和注释。IE7/8包括注释节点,不包括空白节点)
代码示例:
父节点
创建节点
三种创建元素的区别
五.给元素注册事件
注册事件的两种方式:①:传统注册方式 特点:利用on开头的事件onclick 具有唯一性;
②:方法监听注册方式 addEventListener()
六.创建对象