DOM
- 全称Document Object Model文档对象模型
- JS中通过DOM来对HTML文档进行操作.只要理解了DOM就可以随心所欲的操作WEB页面
- 文档
- 文档表示的就是整个的HTML网页文档
- 对象
- 对象表示将网页中的每一个部分都转换为了一个对象
- 模型
- 使用模型来表示对象之间的关系,这样方便我们获取对象
节点
- 构成HTML文档最基本的单位
- 节点Node,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点
- 比如:html标签,属性,文本,注释,整个文档等都是一个节点
- 虽然都是节点,但是实际上他们的具体类型是不同的
- 比如:标签我们称为元素节点,属性称为属性节点,文本称为文本节点,文档称为文档节点
- 节点的类型不同,属性和方法也不尽相同
常用的节点
- 文档节点:整个HTML文档
- 元素节点:HTML文档中的HTML标签
- 属性节点:元素的属性
- 文本节点:HTML标签中的文本内容
节点的属性
事件
- 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间
- JavaScript与HTML之间的交互是通过事件实现的
- 对于Web应用来说,有下面这些代表性的时间:点击某个元素,将鼠标移动至某个元素上方,按下键盘上某个键,等等
绑定事件
- 可以通过在按钮属性里绑定事件(不推荐)
- 也可以获取对象 通过函数绑定事件(推荐)
浏览器加载页面时顺序
script属性一般写在body最下方
- 浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载
onload()
onload事件会在整个页面加载完成之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
获取元素节点
- 通过document对象调用
- getElementById() 通过id属性获取一个元素节点对象
- getElementsByTagName() 通过标签名获取一组元素节点对象
- 这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
- 及时查询到的元素只有一个,也会封装到数组中返回
- getElementsByName() 通过name属性获取一组元素节点对象
innerHTML
用于获取元素内部的HTML代码的
对于自结束标签,这个属性没有意义
读取元素节点属性
直接使用元素.属性名
例如:元素.id 元素.name 元素.value
注意:class属性不能采用这种方式
服务class属性时需要使用 元素.class.Name
实例
获取元素节点的子节点
- 通过具体的元素节点调用
- getElementsByTagName() -- 方法,返回当前节点的指定标签名后代节点
- childNodes -- 属性,表示当前节点的所有子节点
- childNodes属性会获取包括文本节点在内的所有节点
- 根据DOM标签,标签间空白也会当成文本节点
- 注意,在IE8以下的浏览器中,不回将空白文本当成子节点
- children属性可以获取当前元素的所有子元素
- firstChild -- 属性,表示当前节点的第一个子节点
- firstElementChild不支持IE8及一下的浏览器
- 如果需要兼容他们尽量不要使用
- lastChild -- 属性,表示当前节点的最后一个子节点
获取父节点和兄弟节点
- 通过具体的节点调用
- parentNode -- 属性,表示当前节点的父节点
- previousSibing -- 属性,表示当前节点的前一个兄弟节点
- nextSiblin -- 属性,表示当前节点的后一个兄弟节点
innerText
- 该属性可以获取到元素内部的文本
- 它和innerHTML类似,不同的时它会自动将html去除
body
在document中有一个属性body,它保存的是body的引用
documentElement
document.documentElement保存的是html根标签
all
代表页面中所有的元素
class属性值
- 根据元素的class属性值查询一组元素节点对象
- getElementsByClassName()可以根据class属性值获取一组元素节点对象
- 但是该方法不支持IE8及以下的浏览器
querySelector()
document.querySelector()
- 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
- 使用该方法会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个数值
querySelectorAll()
- 该方法和querySelector()用法类似,不同的是他会将符合条件的元素封装到一个数组中返回
- 即使符合条件的元素只有一个,他也会返回数组
dom的增删改
createElement
- document.createElement()
- 可以用于创建一个元素节点对象,他需要一个标签名称作为参数,将会根据该标签名创建元素节点对象
- 并将创建好的对象作为返回值返回
createTextNode
- document.createTextNode()
- 可以用来创建一个文本节点对象
- 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
appendChild
- appendChild()
- 向一个父节点中添加一个新的子节点
- 用法:父节点.appendChild(子节点)
insertBefore
- insertBefore()
- 可以在指定的子节点前插入新的子节点
- 语法:父节点.insertBefore(新节点,旧节点);
replaceChild
- replaceChild()
- 可以使用指定的子节点替换已有的子节点
- 语法:父节点.replaceChild(新节点,旧节点);
removeChild
- removeChild()
- 可以删除一个已有节点
- 语法:父节点.removeChild(子节点);
子节点.parentNode(子节点)
- 在不知道子节点(例如:bj)的父元素时
- 使用bj.parentNode获取其父元素
- bj.parentNode.removeChild(bj);
- 可以在不知道bj节点的父元素时删除已有的bj节点
innerHTML
- 使用innerHTML也可以完成DOM的增删改的相关操作
- 将北京节点改为昌平
- 向city中添加广州节点
- 一般我们会两种方式结合使用
