JS Dom 文档操作对象 Document

======= 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();