DOM概览
文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API。
选取文档元素
- 用指定的id属性；
- 用指定的name属性；
- 用指定的标签属性；
- 用指定的css类；
- 匹配指定的css选择器。
通过ID选取元素
var section1 = document.getElementById("section1");
通过名字选取元素
var radiobuttons = document.getElementsByName("favorite_color");
getElementsByName()定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML文档中不可用。它返回一个NodeList对象，后者的行为类似一个包含若干Element对象的只读数组。
//有些元素可以作为Document属性仅通过名字来选取
//针对***<form name="shipping_address">***
var form = document.shipping_address;
通过标签名选取元素
var spans = document.getElementsyTagName("span");
该方法返回一个NodeList对象。并且不区分大小写。
给getElementsyTagName（）传递通配符参数将获得一个代表文档中所有元素的NodeList对象。*
通过CSS类选取元素
var test = document.getElementByClassName("class_1");
通过CSS选择器选取元素
#nav //id="nav"的元素
div //所有<div>元素
.warning //所有在class属性值中包含了“warning”的元素
p[lang="fr"] //所有使用法语的段落，如：<p lang="fr">
*[name="x"] //所有包含name="x"属性的元素
#log>span //id="log"元素的子元素中的所有<span>元素
body>h1:first-child //<body>的子元素中的第一个<h1>元素
div，#log //所有<div>元素，以及id="log"的元素
document.all[]
document.all[0] //文档中第一个元素
document.all["navbar"] //id或name为"navbar"的元素（或多个元素）
document.all.navbar //同上
document.all.tags("div") //文档中所有的<div>元素
document.all.tags("p")[0] //文档中第一个<p>元素
文档结构和遍历
作为节点树的文档
Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。有以下属性：
- parentNode：该节点的父节点，如果没有父节点就是null；
- childNodes: 只读的类数组对象（NodeList对象），它是该节点的子节点的实时表示；
- firstChild、lastChild： 该节点的子节点中的第一个和最后一个，没有则为null；
- nextSibling、previousSibling： 该节点的兄弟节点中的前一个和后一个。
- nodeType: 该节点的类型。
- 9：Document节点
- 1： Element节点
- 3： Text节点
- 8： Comment节点
- 11： DocumentFragment节点
- nodeValue: Text节点或Comment节点的文本内容。
- nodeName: 元素的标签名，以大写形式表示。
属性
HTML属性作为Element属性
数据集属性
在HTML5文档中，任意以“data-”为前缀的小写的属性名字都是合法的。
HTML5还在Element对象上定义了dataset属性。该属性指代一个对象，它的各个属性对应于去掉前缀的data-属性。因此dataset.x应保存data-x属性的值。
作为Attr节点的属性
Node类型定义了attributes属性。
元素的内容
作为HTML的元素内容
Paste_Image.png
作为纯文本的元素内容
var para = document.getElementByTagName("p")[0]; //文档中第一个<p>
var text = para.textContent; //文本是“This is a simple document.”
para.textContent = "Hello"; //修改段落内容
创建、插入和删除节点
创建节点
var newNode = document.createTextNode("text node content");
每个节点有一个cloneNode（）方法来返回该节点的一个全新副本。
插入节点
一旦有一个新节点，就可以用Node的方法appendChild()或insertBefore()将它插入到文档中。
删除和替换节点
- removeChild()方法是从文档树中删除一个节点。在父节点上调用该方法，并将需要删除的子节点作为方法参数传递给它。
//删除n节点
n.parentNode.removeChild(n);
- replaceChild()方法删除一个子节点并用一个新的节点取而代之。父节点上调用，第一个参数是新节点，第二个参数是需要代替的节点
//用一个文本字符串来替换节点n
n.parentNode.replaceChild(document.createTextNode("[REDACTED]",n);
使用DocumentFragment
DocumentFragment是一种特殊的Node，它作为其他节点的一个临时的容器。
//创建一个DocumentFragment
var frag = document.createDocumentFragment();
DocumentFragment是独立的。它的parentNode总是为null，但是他可以有任意多的子节点，可以用appendChild()和insertBefore()等方法来操作它们。
文档和元素的几何形状和滚动
文档坐标和视口坐标
为了在坐标系之间互相转换，我们需要判定浏览器窗口的滚动条的位置。window对象的pageXOffset和pageYOffset属性在所有的浏览器中提供这些值。
查询窗口的视口尺寸
查询元素的几何尺寸
var box = e.getBoundingClientRect(); //获得在视口坐标中的位置
var offsets = getScrollOffsets(); //上面定义的工具函数
var x = box.left + offsets.x; //转化为文档坐标
var y = box.top + offsets.y;
HTML表单
表单元素1
表单元素2
选取表单和表单元素
//name = "address"属性的<form>可以用以下任何方法来获取
document.address //仅当表单有name属性时可用
document.forms.address //显式访问有name或id的表单
//如果名为“address”的表单的第一个元素的name是“street”，可以使用以下任何一种方式来引用该元素
document.forms.address[0]
document.forms.address.street
document.address.street //当有name=“address”，而不是只有id="address"
document.forms.address.elements.street
//如果要明确的选取一个表单元素，可以索引表单对象的elements属性
document.forms.address.elements[0]
document.forms.address.elements.street
表单和元素的属性
- type:标识表单元素类型的只读的字符串。
- form：对包含元素的Form对象的只读引用。
- name：只读的字符串，由HTML属性name指定。
- value：可读/写的字符串，指定了表单元素包含或代表的“值”。
网友评论