DOM（DOM树&元素树&选取元素1.1）

一、DHTML
1、概念
是动态HTML，将网页实现动态化
作用：
-动态概念页面元素
-与用户进行交互
-对象模型分为BOM和DOM

DHTML =  HTML + CSS + js

2、BOM和DOM
BOM：浏览器对象模型，用来访问和操作浏览器窗口，使js有能力与浏览器进行交互，通过使用BOM，可以移动窗口，可以更改状态栏文本，可以修改地址栏链接
DOM(Document Object Model)：文档对象模型，用来操作HTML文档，定义了操作和访问HTML文档的标准语法，通过对DOM树的操作，实现对HTML文档内容的操作

二、DOM
1、概述
DOM是万维网的标准，允许程序和脚本动态的访问和更新文档的内容，DOM主要分为三个部分：
-核心DOM：针对结构化文档的标准类型
-XMLDOM：主要用于XML类型的文档
-HTMLDOM：主要用于HTML文档

2、HTMLDOM
主要针对HTML文档，当网页加载时，浏览器会创建页面的文档对象模型，通过DOM可以访问所有的HTML元素，包括元素的属性以及样式，同时可以创建新的元素，也可以删除元素，文档中的所有节点组成了一个文档树，document对象是一颗文档树的根节点

三、DOM树
1、节点树
HTMLDOM将HTML文档视为树状结构，文档中的元素、属性、文本、注释都被看做是一个节点，这种结构就是节点树，

树根对象为document对象，通过该对象可以操作整节点树，整个文档是一个文档节点，每个HTML标记是一个元素节点，包含在元素中的文本是文本节点，每个html属性是属性节点，，注释属于注释节点

2、document对象
浏览器内置的js解释器会为每个html文档创建与之对应的document对象，通过该对象，可以在脚本中操作(增删改查)所有的html文档
    1）节点对象类型与继承关系
    DOM中定义了Node类型，node类型是所有节点类型的父类型，node提供了所有节点对象共用的属性和方法
    -nodeType：表明节点类型的数值常量
    -nodeName：节点的名称
    -nodeValue：节点的内容

    除此之外，还提供了节点关系的属性，以及增删节点的方法，Node类型提供的公共属性和方法，多属于核心Dom的范围，DOM书中每种几点都对应一种节点类型
    -Document：document节点对象的父类型
    -Element：所有元素节点父类型
    -Attr：属性节点对象的父类型
    -Text：文本节点对象的父类型
    -Comment：注释节点对象的父类型

    2）节点名称
    -nodeName：字符串类型，只读属性

    -元素节点：元素名
    -属性节点：属性名
    -文本节点：#text
    -注释节点：#comment
    -文档节点：#document

    3）节点类型
    -nodeType:number类型

    -元素节点：1
    -属性节点：2
    -文本节点：3
    -注释节点：8
    -文档节点：9

    4）节点内容
    -nodeValue：字符串类型

    -元素节点：undefined或null
    -属性节点：属性的值
    -文本节点：文本内容本身
    -注释节点：注释文本本身
    -文档节点：undefined或null

    5）节点间关系
    Node类型中定义了节点树种所有节点彼此之间的关系属性：父节点（parentNode）、子节点（childNodes,注意获取到的是子节点集合）、第一个子节点（firstChild）、最后一个子节点（lastChild）、上一个兄弟节点（previousSibling）、下一个兄弟节点（nextSibling）

|
一、元素树
1、概念
元素树是节点树的一个子集，只包含元素节点

2、元素节点间关系
Node类型除定义节点间关系属性外，还定义一套元素节点间的关系属性：
-parentElement：获取父元素节点
-children：获取子元素节点集合
-firstElementChild：获取第一个子元素节点
-lastElementChild：获取最后一个子元素节点
-previousElementSibling：获取上一个兄弟元素节点
-nextElementSibling：获取下一个兄弟元素节点

二、选取元素
1、通过ID选取元素
语法：
document.getElementById(“id值”);
用于在当前dom树中根据ID选择一个元素

2、通过元素名获取元素
根据标记名获取元素节点的集合
语法：
node.getElementsByTagName("标记名");
注意，node可以为任何节点对象（包含document）

3、通过name属性选取元素
语法：
document.getElementsByName("name属性值");
根据name值，获取dom文档中所有name值匹配的元素的集合

|