JavaScript DOM 的基本操作
获取的操作
获取元素节点
document.getElementById(id值)
document.getElementsByTagName(标签名称) --- 节点集
document.getElementsByClassName(类名) --- 节点集
document.querySelector(选择器)
获取的满足选择器的元素中的第一个
document.querySelectorAll(选择器)
获取的满足选择器的所有元素 --- 节点集
获取文本内容
元素节点.innerHTML
可以识别内容中的标签
元素节点.innerText
把标签当做纯文本显示
元素节点.value
获取属性
元素节点.属性名 ---- 对于自定义属性获取不到
元素节点.getAttribute(元素名)
获取css样式值
元素节点.style.样式名 --- 只能获取行内样式设计的值
创建 添加 替换 删除的操作
添加节点 删除节点 替换节点 都是有父节点操作的
创建元素节点
document.createElement(标签名称)
父节点.appendChild(新建的元素节点)
创建文本节点
var text_node = document.createTextNode("文本内容")
// 把内容存在div下
元素节点.appendChild(text_node)
设置文本使用的是
元素节点.innerHTML = "值"
或者
元素节点.innerText = 文本内容
创建属性节点
元素节点.setAttribute("属性名", "属性值")
设置属性的另外一种方式
元素节点.属性名 = 属性值
添加节点/属性
创建的节点属于哪个标签的 就为哪个标签添加
父节点.appendChild(新建的元素节点)
父节点.insertBefore(新建的元素节点, 已存在的节点)
将新建的节点添加在已存在的节点之前
替换节点
父节点.replaceChild(新节点, 旧节点)
删除节点
父节点.removeChild(子节点)
在DOM中常用的一些属性
元素节点.innerText|元素节点.innerHTML --- 获取/设置文本内容
元素节点.value --- 获取/设置表单域中标签的内容
元素节点.parentNode --- 获取父节点