DOM？节点？获取DOM元素？

DOM？

DOM即document object model文档对象模型。

概念：DOM是针对HTML和XML文档的一个API(Application Programming Interface 应用程序编程接口)。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。HTML DOM定义了访问和操作HTML文档的标准方法。

要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

我们可以通过JavaScript操作DOM，可以对节点实现增删改查操作，可以动态添加标签，属性等。

节点：

1. 节点？

HTML文档中的每个成分都是一个节点。

节点类型：DOM是这样规定的，整个文档是一个文档节点，每个HTML标签是一个元素节点，包含在HTML标签中的文本是文本节点（换行也是文本节点），每一个HTML属性是一个属性节点，注释属于注释节点。节点间拥有层次关系。

节点是树形结构，不能交叉，因此整个DOM就是一个节点树。

 

节点属性：

nodeName  节点名称。如果是标签则nodeName返回标签名称，如果是文本节点则nodeName返回#text，如果是注释节点则nodeName返回#comment。常用于根据标签的id获取该标签名，如box.nodeName; 输出为div。

nodeValue  节点值。文本节点nodeValue返回文本内容，元素节点nodeValue不可用且会返回null，注释节点nodeValue返回注释内容。

nodeType   节点类型。输出值为1---元素，输出值为2---属性，输出值为3---文本，输出值为8---注释，输出值为9---文档。常用于判断当前是不是文档节点。

2.  获取DOM元素？

document.getElementById();   根据id名获取DOM元素，唯一一个，因为id是唯一的。

document.getElementsByTagName();   根据标签名获取所有的列表。返回的是所有该标签集合而成的HTMLCollection类数组的HTML标签元素列表类型，但是不能使用数组的方法，注意：虽然不能使用数组方法，但是是可以遍历的因为有长度。

document.getElementsByClassName();  根据标签中的class名获取元素列表。返回的仍然是相同类名集合而成的HTMLCollection类数组。

document.getElementsByName();  根据表单元素的name属性获取节点列表。注意div等标签是没有name属性的。

只有通过ByName获取的才能得到节点列表。返回的是NodeList节点列表，具有forEach的遍历方法。

document.querySelector();   根据选择器选择元素。如括号里面为(“[abb=r]”);这个中括号指属性选择器中属性值等于什么。获取属性为abb=r的元素，其中r要为字符，不能为数字。

document.querySelectorAll();  根据选择器选择所有相同的元素。返回的是一个类数组。如document.querySelectorAll(#b  .box); 指选择所有id为b下的所有class为box的元素。

 

注意：不一定都必须为document.  还可以通过父元素查找。

var box=document.getElementById("box");
var box1=box.getElementsByClassName("abc");  //从box这个父级元素的子元素中查找className是abc的元素

document指全文档查找。

插入一个知识点：关于表单form，其中name属性主要用于表单，这就是url中name=huang&password=123的由来。而在单选和多选中必须设置value属性，目的都是为了在地址栏中有相应提示。