======= JS Dom 文档操作对象 Document
优先级:在JS中,正常的优先级,从上往下执行。因此如果是在head里面
要获取/设置body里面的标签属性,这是做不到的,所以在的通常情况下,我们会script代码放到body后面。
但是,放入body后面可能不便于阅读,因此有2种方式可以解决这个问题:
1、window.onload 会在页面或图像加载完成后立即发生。稍快
2、document.ready 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时。稍慢
dom树
dom
head body
title meta h1 p …
每一颗树都是一颗种子。
每个树都会一个根节点,会有子节点,叶子节点。
=>根节点:在DOM中,最顶上的节点,如下图的 box
=>子节点:在DOM中,A节点包含了B节点,那么就可以把B节点叫做A节点的子节点,例如:box的子节点为box1,box2,box3。
=>叶子节点:在DOM中,如果它不存在任何的子节点,那么就可以将它称之为叶子节点,例如:box4、box5、box3
=>父节点:在DOM中,A节点包含了B节点,那么A就是B的父节点。
=>兄弟节点:在DOM中,属于同一层级的就是兄弟节点。例如:box1,box2,box3是兄弟节点。而box4,box5则不是。
childNodes 返回所有的子节点
childElementCount 子节点个数
firstChildElement 第一个子节点对象
lastChildElement 最后一个子节点对象
previousElementSibling 上一个子节点对象
nextElementSibling 下一个子节点对象
parentElement 父节点对象
练习一:请创建一个table,有四列,分别是 序号,用户名,密码,操作。
样式如下:
序号 用户名 密码 操作
1 jack 123456 删除
现在删除有一个id,请通过删除dom标签,获取jack名称。
innerHTML/innerText
innerHTML: 获取/设置HTML信息
innerText : 获取/设置文本信息
例如:以下文本
请说出以下标签哪一个是段落标签:
A.
B.
C.
D.
document 过滤器
//通过ID获取
document.getElementById()
//通过Name获取:注意返回的是集合
document.getElementsByName()
//通过Tag获取:注意返回的是集合
document.getElementsByTagName()
//通过Class获取:注意返回的是集合
document.getElementsByClassName()
//练习二:请在一个表单中,创建一个单选框。请利用JS获取单选框的值。
注意:
1、除了id以外,其他获取对象返回的都是集合,因此需要有下标获取具体对象。
2、所有通过以上方法或者DOM对象后设置属性,必须是该控件所拥有的属性,如果强制获取,会报错。
3、关于自定义属性,有 setAttribute 和 getAttribute。
setAttribute(“属性名”,“属性值”) 设置自定义/内置属性
getAttribute(“属性名”) 获取自定义/内置属性
动态创建/删除/插入/追加
所谓动态创建,也就是说在DOM加载完成后是没有这个控件的。一旦某件事件触发就会创建一个DOM出来。
动态创建标签: createElement();
追加设置:appendChild();
删除元素: removeChild();