目录
1、DOM简介
1、DOM概念
1、DOM的含义
DOM是Document Object Model 文档对象模型 是Javascript操作文档的接口,是处理可扩展标记语言的标准编程接口。可以通过WC3定义的Dom接口,来改变HTML的结构、样式和内容。
可以将HTML文档表示为文档树 整个文档就对应一个document对象。
获取过来的DOM元素都是一个对象(object),因此被称为 文档对象模型。
2、基本概念
文档(document):一个页面就是一个文档
元素(element):页面中的所有标签都是元素
节点(node):网页中的所有内容都是节点(标签,属性,文本,注释等)
在DOM中,文档中的所有内容都是节点。
直白的说就是DOM对象是网页的所有对象,我们可以通过操作DOM对象来操作网页
2、获取元素
2.1、DOM提供的API方法:
1、getElementbyId()
通过id获取元素
2、getElementsByTagName()
通过标签获取指定标签名的对象的集合
返回时数组 如果没有整个标签 则返回一个空的伪数组
3、getElementByClassName() //h5新增
通过类名获取
5.2、H5提供的新方法
4、querySelector()
返回指定选择器的第一个元素 需要加符号 . #
5、querySelectorAll()
返回指定标签的所有元素
6、获取特定标签
body:document.body
html:document.documentElement
3、操作元素
1、修改元素
1、修改元素内容
//都可读写
innerHTML = ' 修改的内容'
保留html标签的内容 空格和换行也保留
innerText = ' 修改的内容'
从起始位置到终止位置的内容 去除html标签 空格和换行也会去掉
2、修改元素属性
element(元素名).属性 = ' '
src id href title 等
3、修改元素样式
- element.style (行内样式修改)修改元素单个样式
- element.className = 'classname' 修改元素的className 适合多个样式 会覆盖原来的类名 // element.className = '原类名 classname' 多类名选择器 可保留原类名
4、获取元素的属性值
- element.属性名
主要是内置属性 - element.getAttribute(’属性名‘)
自定义属性
5、设置元素的属性值
- element..属性名 = ’‘
- element.setAtrribute(’属性名‘,值)
6、自定义属性
程序员内部自定义的属性 规定命名方式 以区分是否为自定义属性
data-开头
7、修改表单属性
利用DOM操作表单属性:type、value、checked、selected、disabled
8、
4、事件
1、事件三要素
事件源:什么被触发
事件类型:是按钮还是其他
事件处理程序:通过函数赋值来处理事件
2、事件执行过程
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
5、节点操作
5.1、为什么要用节点获取元素
利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强 兼容性较差
Dom树中的所有节点都可以通过javascript来操作 (修改、删除、创建)
5.2、节点概述
节点类型(nodeType)、节点名称(nodeName)、节点值(nodeValue)
- 元素节点 nodeType 1
- 属性节点 nodeType 2
- 文本节点 nodeType 3(包含文字、空格、换行等)
5.3、节点层次
5.3.1、父级/子级节点
Dom把节点划分不同的层级关系,最常用的是父子级关系
子节点:
childNodes 返回所有子节点 包括元素、文本节点,因此不推荐使用
父节点.children 获取所有的子元素节点 //常用
获取第一个子节点
父节点.firstChild 不管是文本节点还是元素节点
父节点.firsElementtChild 获取第一个元素节点
获取最后一个子节点
父节点.lastElementChild 不管是文本节点还是元素节点
5. 4、兄弟节点
node.nextSibling 下一个兄弟节点,包括元素节点 、文本节点等
node.nextEelementSibling 得到下一个兄弟节点的元素节点
5.5、创建节点
5.5.1、创建节点元素
node.createElement()
5.5.2、添加节点
node.appendChild() //node 父级节点 在原先节点的后面添加新节点
node.insertBefore(child,指定元素) 在原先节点的前面添加节点
5.6、删除节点
node.removeChild(node.child) node为父节点
5.7、复制节点(克隆节点)
node.cloneNode() node是父节点
括号为空或者是false 为浅拷贝 不复制内容和子节点
为true 则是深拷贝 会复制所有内容