DOM的分类
(1).document dom操作里最大的对象 操作的html文档
(2).element 元素对象 表示对应的标签元素
(3).attribute 属性对象 表示html标签里的属性
(4).text 文本对象 表示在html里面所有的文本
dom通过对应的标识来获取element元素
创建相关方法 创建对应的节点对象
Element元素对象
1.获取的方法
如DOM
2.添加的方法
(1)追加到末尾的方法(append 追加多个 支持里面传入字符串 appendChild 追加一个 只支持node对象)
(2)插入到某个元素子元素之前 insertBefore 插入元素到某个子元素之前 (参数1需要传入的元素、参数2子元素)
insertAdjacentElement 插入element
insertAdjacentHTML 插入HTML代码
insertAdjacentText 插入文本
3.删除方法
(1)remove 删除自身
box.remove()
(2)removeChild 删除子元素
box.removeChild(link)
4.修改方法
replaceChild(新的节点,对应的子节点) 一对一替换
replaceChildren 替换所有 (可传递多个参数 支持字符串)
5.克隆的方法
cloneNode
var element = box.cloneNode()
克隆对应的元素 传递的参数是一个布尔类型的值 为true表示深度克隆 为false表示浅克隆(false)
6.属性操作的相关方法
(1)获取 getAttribute(attrName)
(2).设置 setAttribute(attrName,attrValue)
第一个参数名 第二个为属性值,且自动发动隐式转换
(3).删除 removeAttribute(attrName)
7.属性
id 属性 (获取/设置 id值)
className 属性 (获取/设置 class值)
style 属性 (获取对应的一个样式对象 / 设置相关样式)
title 属性 (获取/设置 title属性)
tagName 属性 (只读属性)
innerHTML 属性 (显示的html内容 编译对应的html代码)
innerText 属性 (显示的文本 不能编译html代码)
例: div.id div.innerHTML div.innerText ...
8.节点相关属性
previousElementSibling 前面的元素
nextElementSibling 后面的元素
parentElement 父元素
children 子元素集合 (HTMLCollection)
9.相关获取元素内属性节点集合的属性(只读属性)
!!!attributes
获取元素内所有的属性节点的属性 返回的是一个伪数组 nameNodeMap (伪数组 map他是存储键值对)
var attrs = div.attributes
console.log(attrs);
console.log(attrs[0]); //获取第一个属性对象
console.log(attrs[0].value); //获取第一个属性对象的属性值
console.log(attrs.id); //获取属性名为id的属性对象
console.log(attrs.id.value); //获取属性名为id的属性值
nameNodeMap对象拥有的方法
getNameNodeItem("") 传入对应的属性名获取对应的对象
setNameNodeItem 表示创建对象
removeNameItem("") 移除
Node
元素节点 element
属性节点 attributeNode
文本节点 textNode
节点划分的属性
nodeName 节点名
nodeType 节点类型
nodeValue 节点值
节点关系的属性
(1)父子
parentElement 父元素
parentNode 父节点
childNodes 所有的子节点(包含元素节点和文本节点)
children 所有的元素节点
(2).兄弟关系
previousElementSibling 上一个元素节点
previousSibling 上一个节点
nextElementSibling 下一个元素节点
nextSibling 下一个节点
(3)第一个子节点和最后一个子节点
firstChild 第一个子节点
firstElementChild 第一个子元素节点
lastChild 最后一个子节点
lastElementChild 最后一个子元素节点
操作属性节点的方法
setAttributeNode (属性节点 Attribute对象)
getAttributeNode (返回的是一个属性节点 Attribute)
removeAttributeNode (根据对应的属性节点删除)