HTML学习
day6-js应用
DOM操作的概念
1.什么是DOM
Document Object Model的缩写
DOM又叫文档对象模型
DOM操作指的就是用js代码来操作网页的内容
js中提供了 document 对象，指向整个网页内容的部分。如果要操作网页内容，必须通过 document 对象直接或者间接的获取到内容对象的标签。
2.DOM的基本结构
document是一个根节点，下面每一个标签会对应一个子节点，整个结构是一个倒立的树状结构
2.DOM基本操作
1.获取节点（在js中获取html中的标签）
a.通过id获取标签对应的节点
document.getElementById（id属性值）
获取当前页面中id属性值是指定值的标签对应的节点对象
b.通过class获取标签对应的节点
document.getElementsByClassName（）
返回的是一个类似数组的容器，容器中的元素就是对应的标签
可以通过下标依次取出每一个元素
注意：不能用for- in的方式来遍历这个容器
c.通过标签名获取标签对应的节点
document.getElementsByTagName()
d.通过子节点来获取父节点
节点.parentElement
获取当前节点的父节点
e.通过父节点获取子节点
1）节点对象.children
2）节点对象.firstElementChild
3）节点对象.lastElementChild
1）获取指定节点所有的子节点
2）获取指定节点的第一个子节点
3）获取指定节点的最后一个子节点
2.添加节点
1）创建节点
document.createElement(标签名)
节点1.appendChild(节点2)
在节点1的最后添加节点2（节点1和节点2是父子关系）
注意：一个节点只能添加一次，不会两个都添加，要添加需要把节点拷贝一次
节点1.insertBefore(节点3, 节点2)
将节点3插入到节点1中的节点2前面
3.删除节点
1）删除指定节点
节点对象.remove()
2)(了解)删除指定父节点中指定的子节点
父节点.removeChild(子节点)
4.拷贝节点
1）浅拷贝
节点对象.cloneNode()
2）深拷贝
节点对象.cloneNode(true)
节点属性
1.标签内容
1）获取或者修改文本内容（不能处理内容中标签）
节点.innnerText
2）获取或者修改标签内容（可以处理内容中标签）
节点.innerHTML
2.class属性
节点.className
节点.className = 值
3.普通属性
html中标签中的属性在js的节点对象中都有一个对应的属性，它们的属性名和功能是一样的
4.样式属性
1）style属性
2）style.样式属性
