JavaScript 之 DOM (入门 详细）

扩展

表单标签

• form标签
• input系列标签
• button按钮标签
• select下拉标签
• textarea文本域标签
• label标签

DOM Document Object Model 文档对象模型

DOM操作

获取元素

通过id名获取

document.getElementById("id名")

通过标签名获取

[ele/document].getElementsByTagName("标签名") 集合

通过类名获取

[ele/document].getElementsByClassName("class名") 集合

通过name（表单）获取

document.getElementsByName("name值") 集合

通过选择器获取

获取head标签

获取body标签

获取html标签

获取屏幕的高度 宽度

clientHeight clientWidth

元素查找方式

children 查找子元素

firstElementChild 查找第一个子元素

lastElementChild 查找最后一个子元素

nextElementSibling 找下面的一个兄弟元素

previousElementSibling 找上面的一个兄弟元素

节点

文档节点

nodeType--9 nodeName---#document nodeValue--null

属性节点

nodeType--2 nodeName---属性名 nodeValue--属性值

元素节点

nodeType--1 nodeName---标签名大写 nodeValue--null

文本节点

nodeType--3 nodeName---#text nodeValue--文本内容

注释节点

nodeType--8 nodeName---#comment nodeValue--注释内容

节点的查找方式

parentNode 查找父节点 唯一

childNodes 查找子节点

firstChild 第一个子节点

lastChild 最后一个子节点

nextSibling 找下面的一个兄弟节点

previousSibling 找上面的一个兄弟节点

练习

获取节点下面的所有子元素字节

console.log(ulBox.children);

手动封装

获取节点上面的一个兄弟元素节点

var box = document.querySelector(".box");

console.log(box.previousElementSibling);

DOM的增删改

createElement

创建一个元素

• 创建标签

• 添加内容

• 写入页面

createTextNode

创建一个文本节点

appendChild

父元素.appendChild(子元素)

添加到父元素的最后，是最后一个元素

练习

给ul添加一项li

insertBefore

将新的子元素插入到旧子元素的前面

父级元素.insertBefore(新的子元素，旧的子元素)

交换位置

cloneNode

克隆

克隆元素.cloneNode(无/true)

无参数时只是克隆节点，里面的样式和内容都没有被克隆

有参数时，参数为true，全都克隆到了 有样式也有内容

removeChild

删除某一个节点

父元素.removeChild(子元素）；

属性操作

操作对象上自带的属性 或者给它添加私有属性

标签元素都是对象

对本身具有的属性赋值 --- 标签上可以看见

删除时直接给他赋空值

添加一个私有属性 --- 标签上看不见

setAttribute 设置属性

getAttribute 获取属性

removeAttribute 删除属性