HTML DOM入门1：DOM元素的常见方法及其属性

1.HTML DOM简介

DOM指Document Object Model ，文档对象模型，利用DOM可以将html的数据当作对象处理。它的优点是，方便程序和脚本动态地访问、更新文档的内容、结构和样式。

Document对象的继承结构：
1.共同父类是Root Element:
2.子类包括头文件head ,另外还有body 等

DOM包括核心DOM、XML DOM 以及HTML DOM，顾名思义，HTML DOM针对的是HTML文档。

2.HTML DOM 元素（document）的组织形式：节点

HTML DOM把所有内容都看作树中的节点。比如，下面的代码中：
(1)是root，拥有firstChild:和lastChild:
(2)和;和互为Sibling.
注意：由于p1和p2之间有一个空格。空格是一个文本。因此body的childNodes个数为三个而非两个。（除了空格之外，换行符、字符、字符串也有类似效果）（但Children个数似乎为2个，待进一步查询）
(3)“文本2”的父节点是

  
  
 
 
 文本1 文本2
 

3.节点方法

//document是类名，getElementId是方法，这个方法的作用是寻找特定id的html元素，将返回一个html元素。
var a = document.getElementById("id1");
//类似方法可以利用TagName ClassName寻找，将返回一个节点列表（ID在设计上是唯一的）
var divs = document.getElementsByTagName("div");//标签
var b = document.getElementsByClassName("class1");
var c = document.getElementsByName("input1");//表单通常设计为如的模式

//其他常见方法包括：（见后续，先介绍节点属性）

4.节点属性

a.节点的属性节点attributes

一个元素（节点）可能有多个属性，如：id为id1，class为class1 align为right
那么，将这三个属性抽象出来当作元素看待，称作属性节点。
如ID属性：它的节点名为id，节点值为id1。有点类似于键值对的思想。
可以通过attributes关键字，可以得到一个元素的属性节点的列表。

var  div1 = document.getElementById("id1");//div1是一个元素
var as = div1.attributes;//as是这个元素的属性节点列表，是一个数组。

b.节点名nodeName

文本内容
var div1=document.getElementById("id1");

//如果是文本节点和文档节点，会返回#text和#document
var a = document.nodeName;//返回#document
//如果是元素节点或者属性节点，等于元素名或属性名
var b = div.nodeName;//返回元素节点的元素名：DIV
var c = div1.attributes[0].nodeName;//返回属性节点的属性名:id

c.节点值nodeValue、节点文本innerHTML

文本节点和属性节点具有节点值。可以初步把节点值理解为往该元素中填充的某种内容。

文本内容

//内容文本的nodeValue是文本内容
var txt = document.getElementById("id1").childNodes[0].nodeValue;//返回"文本内容"
//也可以用 innerHTML获取文本内容
var txt = document.getElementById("id1").innerHTML;//返回"文本内容"
//而属性节点的nodeValue是属性值
var txt =document.getElementById("id1").attributes[0].nodeName;//返回它的一个属性id的属性值：id1
//document和元素节点的属性值为null

d.节点类型nodeType

一个节点，可能是常见的元素型节点，也可能是文本节点，还有可能是抽象出来的属性节点。描述节点类型的变量称为nodeType.
常见节点的类型有:元素型1，属性节点2，文本节点3，注释8，文档9

文本内容
var type1 = document.getElementById("id1").nodeType;//由于是一个元素节点，所以会返回1

e.已知某种自定义属性名，获取元素对象的自定义属性值

采用element.attrtibutes[“属性名”]来获得相应的属性元素

//自定义一种属性 property1
文本内容
var value =document.getElementById("id1").attributes["property1"].nodeValue;//返回字符串red