DOM Document Object Model 文档对象模型
html标签 == 元素 == 节点 ElementX
修改标签之间的内尔用
a.innerHTML
//单击事件 onclick 鼠标移入 onmouseover
// 根据id 返回 对象
document.getElementById()
// 根据类名 返回 数组
document.getElementsByClassName()
// 根据name属性值 返回 数组
document.getElementsByName()
// 根据标签 返回 数组
document.getElementsByTagName()
// 获取body标签
var body = document.getElementsByTagName("body")[0]
console.log(body)
// body也是document对象的一个属性 ,保存的是body的引用
var body1 = document.body
console.log(body1)
// 获取html根标签
var html = document.documentElement;
console.log(html)
// 根据类名获取指定元素对象
// document.getElementsByClassName(c1)
// 根据选择器获取指定元素信息 querySelector
var q = document.querySelector(".c1")
console.log(q)
var q1 = document.querySelectorAll(".c1")
console.log(q1)
console.log(q1[0])
// 获取ul下所有的子元素
var children1 = ul.children
// 获取ul下所有的子节点
var children2 = ul.childNodes
// 获取ul的父节点
var parent1 = ul.parentNode
// 获取ul的父元素
var parent2 = ul.parentElement
// 获取ul的第一个子节点
var first1 = ul.firstChild
// 获取ul的第一个子元素
var first2 = ul.firstElementChild
// 获取ul的上一个兄弟节点
var brother1 = ul.previousSibling
// 获取ul的下一个兄弟节点
var brother2 = ul.nextSibling
// 获取ul的上一个兄弟元素
var brother3 = ul.previousElementSibling
// 获取ul的下一个兄弟元素
var brother4 = ul.nextElementSibling
//查找所有li节点
var list = document.getElementsByTagName("li")
// 创建一个元素
var p = document.createElement("p")
console.log(p)
// 创建一个新的文本节点
var text = document.createTextNode("erhuo")
console.log(text)
// 给p标签添加一个节点
p.appendChild(text)
// 将p添加到li之前
ul.insertBefore(p,li)
// 将li元素删除
ul.removeChild(li)
获取元素的宽度
getComputedStyle(box , null)["width"];
通过该方法读取到样式都是只读的不能修改
clientHeight
元素的可见高度,指元素的内容区和内边距的高度
clientWidth
元素的可见宽度,指元素的内容区和内边距的宽度
offsetHeight
整个元素的高度,包括内容区、内边距、边框
offfsetWidth
整个元素的宽度,包括内容区、内边距、边框