DOM操作(未完待续)
API和 Web API
1.API是为程序员提供的一个接口，帮助我们实现某种功能
2.Web API是浏览器提供的一套操作浏览器和页面元素的API(BOM和DOM)
3.Web API主要是针对浏览器提供的接口，主要针对浏览器做交互效果
4.Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）
DOM元素的查找方式
getElementById()
根据元素id获取 document.getElementById(id属性值)
结果是唯一的
你好世界
getElementsTagName()
根据标签名获取 document.getElementsByTagName(标签名)
结果也是一个html元素集合 HTMLCollection() ，伪数组形式，通过下标访问具体的元素
锻炼看 === 类名1
锻炼看 =----= 类名2
getElementsByClassName()
根据类名获取元素 document.getElementsByClassName(类名)
- 结果是一个html元素集合,HTMLCollection(4) ，是一个伪数组 通过下标访问具体的某个html元素 ; 如果结果只有一个值，也是通过下标的形式访问
锻炼看 === 类名1
锻炼看 =----= 类名2
锻炼看 == 类名3
用户名
getElementsByName()
通过name属性值查找 document.getElementsByName(name属性值);
结果是节点集合 NodeList [input.ipt] 伪数组形式 通过下标访问元素
querySelector()
查找的是第一个匹配的元素，结果是唯一的 document.querySelector(选择器)
用户名
querySelectorAll()
查找所有的元素 document.querySelectorAll(选择器)
结果是 节点集合对象 NodeList(5) 伪数组形式 通过下标访问元素
锻炼看 id查找
锻炼看
锻炼看 === 类名1
锻炼看 =----= 类名2
锻炼看 == 类名3
DOM操作
DOM树
- 文档 : 一个页面就是一个文档 , DOM中使用document表示
- 元素 : 页面中的所有标签都是元素, DOM中使用element示
- 节点 : 网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示
自定义属性操作
获取属性
??element.属性名
??getAttribute(属性名)
??: 可以获取自定义属性
属性操作
??element.属性与element.getAttribute('属性')的区别
-
两者都是用来获取元素属性的
-
element.属性 获取内置的属性值(元素本身自带的属性)
-
element.getAttribute('属性') 主要获得自定义的属性 (标准) 程序员自定义的属性
??domObj.attributes
获取标签所有的属性, 结果是属性集合, 伪数组形式
- 获取标签所有的属性
- 获取标签所有的属性
- 获取标签所有的属性
- 获取标签所有的属性
H5获取自定义属性
H5规定自定义date-开头的属性名并赋值
dataset是一个集合里面存放了所有以date开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
如果自定义属性里面有多个-连接的单词，我们获取的时候采取驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
设置属性
??element.属性名 = '值'
??setAttribute('属性名', '属性值')
-
设置标签的属性（给标签添加属性并赋值）
-
主要针对自定义属性
添加属性设置属性
移除属性
??removeAttribute('属性名')
删除标签的属性
删除属性
元素内容的操作
innerText :
不能识别标签 纯文本操作
hello
床前明月光
李白地上躺
innerHtml：
添加并替换标签的内容（html结构）；可以识别标签
hello
赋值 替换操作 用指定的内容替换原本的内容
床前明月光
李白地上躺
outerHtml:
outerHTML : 类似于innerHTML, 区别在于包含标签自身
元素样式的操作
element.style 行内样式操作
element.clsssName 类名样式操作
操作类名
操作标签的类名 classList 类名集合对象
obj.classList 获取类名集合 伪数组形式
classList 类名集合对象
添加/删除类名
obj.classList.add()
obj.classList.remove()
classList 类名集合对象
判断类名是否存在
obj.classList.contains()
判断是否存在某个类名 obj.contains(类名) 结果是一个布尔值, true 存在 , false 不存在
classList 类名集合对象
自动切换类名
obj.classList.toggle()
节点操作
利用节点层级关系获取元素
-
网页中所有内容(标签，属性，文本，注释)都是节点，节点使用
node来表示 -
利用父子兄节点关系获取元素
-
逻辑性强，但是兼容相差
节点至少有nodeType(节点类型)，nodeName(节点名称)和nodeValue(节点值)这三个基本属性
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 （文本节点包含文字，空格，换行）
父节点操作
1.父级节点 node.parentNode
2.parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
3.如果指定的节点没有父节点则返回null
×
子节点操作
parentNode.childNodes（标准）
parentNode.childNodes返回包含指定节点的子节点集合，该集合为即时更新的集合
parentNode.children（非标准）
parentNode.children是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回
- 我是li
- 我是li
- 我是li
- 我是li
parentNode.firstChild
返回第一个第一个子节点，找不到则返回null,同样也是包含所有的节点
parentNode.lastChild
返回最后一个子节点，找不到则返回null,同样也是包含所有的节点
parentNode.firstElementChild (IE9以上)
返回第一个子元素节点
parentNode.lastElementChild (IE9以上)
返回最后一个子元素节点
- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
兄弟节点操作
node.nextSilbling
node.nextSilbling 返回当前元素的下一个兄弟节点，找不到则返回null,同样，也是包含所有的节点
node.previousSibling
node.previousSibling 返回当前元素的下一个兄弟节点，找不到则返回null，同样也是包含所有的节点
node.nextElementsibling
node.nextElementsibling 返回当前元素下一个兄弟元素节点，找不到返回null