扩展
表单标签
- 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(子元素);
属性操作
操作对象上自带的属性 或者给它添加私有属性
标签元素都是对象
对本身具有的属性赋值 --- 标签上可以看见
删除时直接给他赋空值