DOM
DOM(Document Object Model):
结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。
结点类型
1.元素结点
2.属性结点
3.文本结点
结点的注意点:
1.文本节点和属性结点都看作元素结点的子结点
2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用“结点”称呼它
3.结点的关系有:父子关系、兄弟关系
1.获取元素结点
1)直接获取
① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()
2)间接获取
父子关系
firstChild lastChild childNodes
子父关系
parentNode
兄弟关系
nextSibling previousSibling
2.操作属性结点
1)通过对象“.”属性,来操作属性
优:可以动态获取用户修改的属性值
缺:不能获取自定义属性的值
2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
优:可以获取自定义属性的值
缺:不能动态获取用户修改的属性值
3.处理文本结点
1) 通过对象.innerText 获取标签内部的文本信息
2) 通过对象.innerHTML 获取标签内部的HTML代码
4.动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)
3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)
4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)
5)(父结点)删除旧子结点对象
fahterNode.removeChild(旧结点对象)
5.动态改变元素的CSS样式(不重要)
1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称
2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)