DOM

DOM(document object model)

DOM0 版本

​ 1 1998年

​ 2 2000

​ 3 2004

	4		2015

节点(Node)

​ 元素,标签,包括注释(注释节点)

​ 元素节点 文本节点 属性节点

​

节点名称NodeName 标签名 #text 属性名

节点类型 NodeType 1 3 2

节点的值NodeValue null 文本的值 属性值

获取到的节点名称都是大写

通过id获取到元素

document.getElementById()

get获取

Element元素

By通过

Id id

通过类名获取到元素

document.getElementsByClassName()

注意:类名可以有多个所以是Elements 所以最后是获取到一个数组.想获取到具体的某一个元素用数组的下标.

通过标签名获取到元素

document.getElementsByTagName()

和类名获取同理

通过Name值

document.getElementsByName(“name值”)

选择器选择

IE8以下不支持 无法实时返回元素(删除和增加)

document.querySelector(“css选择器”) 满足条件的第一个

document.querySelectorAll(“css选择器”) 满足条件的所有

关系层次选择节点

兄弟

nextSibling 下一个节点,注意回车空格

previousSibling 上一个节点

nextElementSibling 下一个元素节点,忽略空格回车等文本节点

previousElementSibling 上一个元素节点

父节点

parentNode

父元素节点

parentElement

子节点

children 所有的子元素节点

firstChild 最后一个子节点(一般为回车的文本节点)

lastChild 第一个子节点(一般为)

firstElementChild 第一个子元素节点

lastElementChild 最后一个子元素节点

替换(修改)

节点属性

p1=节点

p1.innerText=${i}秒之后自动关闭 不能识别标签,全部识别为字符串

p1.innerHTML=<span>${i}秒之后自动关闭</span> 可以识别标签

​

新增节点

1. 节点名称

   let 变量=document.createElement(“标签名”)

2. 添加元素内容

   let 变量2= document.createTextNode(“七里香”)

   变量.appendChild(变量2);

3. 添加节点

   获取到需要添加子元素的节点.appendChild(变量)

节点.appendChild(变量) 将变量添加为节点的子元素,位置在最后

想添加两个一样的元素要重复两次以上步骤

插入节点

在某个节点前面插入新节点

1. 获取目标父节点
2. 获取目标子节点
3. 创建新的节点
4. 父节点.insertBefore(新节点,目标子节点)

也可把已存在的元素插入到其他元素前面,达到移动的效果

删除(包括子元素)

目标节点.remove(); 直接删除.

通过父元素删除

父节点.removeChild(子节点);

更换节点

将目标节点更换为新节点

1. 获取父节点
2. 获取目标节点
3. 新建节点
4. 父节点.replaceChild(新,目标)

属性

小技巧 get获取 set设置

目标节点.getAttribute(“属性”)

目标节点.setAttribute(“属性”,“设置为什么值”)

快速获取 设置()

目标节点.属性名 获取

目标节点.属性名=“属性值” 修改

删除

目标节点.removeAttribute(“属性名”)

通过自定义属性获取节点

let f68Div=document.querySelector(“div[f68=‘123’]”)

目标节点.dataset.自定义属性名=“自定义属性值” 修改自定义属性值

添加样式

以内嵌样式来实现

目标节点.style.css属性名=“属性值”

background-color 写成backgroundColor

获取样式属性

目标节点.style.css属性名 只能获取行内样式

//获取外部样式 通过键值对获取,一般不用

//content+padding

console.log(fuNode.clientWidth);

//content+padding+border

console.log(fuNode.offsetWidth);

获取位置

如果父元素有固定定位和绝对定位就是相对于父元素左上角,否则是视口左上角

目标节点.offsetLeft

目标结点.offsetTop