JavaScript-DOM上

一、DOM的概念

1、DOM的概念及作用

DOM的概念:

当页面被加载的的时候，浏览器会创建页面的文档对象模型,DOM指的就是文档对象模型(Document Object Model).
DOM又称为文档树模型。

DOM的作用:

通过DOM我们可以动态的改变页面的内容，比如完成页面元素的添加，删除，或者修改页面的内容等。

2、DOM树

DOM把HTML解析为一个树结构，这个树结构成为DOM树

DOM树完整的展示了HTML的结构,DOM树如下所示:

几个重要的概念

- 文档：一个网页可以称为文档
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
- 元素：网页中的标签
- 属性：标签的属性

二、节点属性

1、DOM节点关系

DOM结构中的每一部分我们都称之为节点，比如我们看到,

我们主要用父（parent）、子（child）和同胞（sibling）等术语用于描述节点关系。
父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。一个节点可拥有任意数量的子节点，同胞是拥有相同父节点的节点。

2、DOM节点类型

思考：在DOM 中，所有事物都是节点。那我们的页面中都有什么样的节点？

我们把整个html文件看成是一个文档
文件中的像div，p标签等就叫做元素节点，
元素节点中的文本我们就叫做文本节点, 
而像a标签中的href属性，我们就称之为属性节点，
我们写代码要注意养成写注释的好习惯，我们写的注释也是DOM节点的一部分，统称为叫做注释节点。

总结：DOM中节点类型有三种：元素节点、属性节点、文本节点

节点中主要有三个属性分别是 nodeName,nodeValue,nodeType。

3、nodeName 节点名字

nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。

如果节点是属性节点，则 nodeName 属性返回属性的名称。

文本节点的nodeName 永远是 #text。

4、nodeValue节点值

nodeValue属性设置或返回指定节点的节点值。

对于元素节点，返回永远是null

对于属性节点，nodeValue=属性值

对于文本节点，nodeValue=文本值

5、nodeType 节点类型

nodeType 属性以数字值返回指定节点的节点类型，

节点类型由一个常量数字来表示，
比如元素节点，nodeType 属性将返回 1

比如属性节点，nodeType 属性将返回 2

比如文本节点，nodeType 属性将返回 3

三、文档的写入

1、document.write()

write() 方法可向文档写入 HTML 代码或 JavaScript 代码。

四、 查找元素

为什么要获取页面元素

我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

查找元素主要有四种方式,我们可以通过ID，Name属性，类名以及标签名来查找

1、getElementById()

getElementById()通过id来查找元素，返回拥有指定id的对象

在操作文档的一个指定元素的时候，可以给他一个指定的id，这样就可以通过这个方法获取这个元素对象了，代码如下：

<input type="button" value="按钮" id="btn">
<script>
    //通过id值来获取元素
    var btnObj = document.getElementById('btn');
    console.log(btnObj);
</script>

2、getElementsByTagName()

getElementsByTagName()方法可返回带有指定标签名的对象的数组。

如果把特殊字符串 * 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表;

传递给 getElementsByTagName() 方法的标签字符串可以不区分大小写。代码如下:

<input type="text">
<input type="password">
<input type="radio">
<input type="reset">
<script>
    //通过标签名字来获取一组元素
    var iptObjs = document.getElementsByTagName('input');
    console.log(iptObjs);
</script>

3、getElementsByName()

getElementsByName()方法可返回带有指定名称的对象的数组。

因为一个文档中的name属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。代码如下：

<input type="checkbox" name="food">香蕉拌榴莲