学习笔记二|脚本化文档

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：可读/写的字符串，指定了表单元素包含或代表的“值”。