选取文档元素
d啊多数客户端JavaScript程序运行时总是在操作一个或多个文档元素。可以使用全局变量document来引用Document对象。
- 用指定的id属性
- 用指定的name属性
- 用指定的标签名字
- 用指定的CSS类
- 匹配指定的CSS选择器
通过ID选取元素
通过使用Document对象的getElementById()方法选取元素。
// 返回根据这个Id查找的Element对象
var elt = document.getElementById("id");
通过名字获取元素
通过使用Document对象的getElementsByName()方法选取元素。但是由于Name不是唯一的,所有返回的是一个类数组对象(NodeList),可以向操作数组一样操作该对象。
var etls = document.getElementsByName("");
通过标签名选取元素
通过使用Document对象的getElementsByTagName()方法选取元素。也是返回一个NodeList
var elts = document.getElementsByTagName("");
通过CSS类选取元素
通过使用Document对象的getElementsByClassName()方法选取元素。
var elts = document.getElementsByClassName("");
通过CSS类选择器选择元素
Document对象有两个方法可以根据CSS类选择器选取元素,只要将CSS类选择器的字符串形式传入到参数中就可以选取元素。
querySelectorAll()
// 获取所有div属性为a的元素,放回的NodeList对象和上面的不同,这次返回的不是实时的。
document.querySelectoryAll("div[name=a]");
querySelector()
// 只返回第一个匹配到的元素
document.querySelectoryAll("div[name=a]");
文档结构
作为节点树的文档
Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了一下重要属性:
- parentNode
- childNodes
- firstChild、lastChild
- nextSibling、previoursSibling
- nodeType
- nodeValue
- nodeName
作为元素的文档
Element对象的children属性。和childNodes类似,不同之处在于它只包含Element对象。
注意:Text和Commont节点没有children属性。
- firstElementChild,lastElementChild
- nextElementSibling,previoursElementSibling
- childElementCound
属性
HTML属性作为Element的属性
HTML标签的属性在JavaScript转换成Element对象后可以直接使用点操作符来操作。
// 获取img元素
var image = document.getElementById("myImage");
// src属性是图片的URL
var imgurl = image.src;
获取和设置非标准HTML
getAttribute()、setAttribute()、hasAttribtue()和removeAttribute()
数据集属性
在HTML5文档中,任意以“data-”为前缀的小写的属性名字都是合法的。
HTML5还在Element对象上定义了dataset属性。dataset.x一个个保存data-x属性的值。
<div id="mydiv" data-my-a="abcd">
</div>
var elt = document.getElementById("mydiv");
// a的值就是abcd
var a = elt.dataset.myA;
作为Attr节点的属性
Node类型定义了attributes属性。对于非Element对象的任何节点,该属性为null。对于Element对象,attributes属性是只读的类数组对象,它代表元素的所有属性
// 下面两行代码是相同的意思
// <body>元素的bgcolor属性
document.body.attributes["bgcolor"];
document.body.attributes.bgcolor;
元素的内容
作为HTML的元素的内容
innerHTML
标签内的文本,不包含该Element的标签
outerHTML
标签内的文本,包含该Element的标签
insertAdjacentHTML()
第一个参数
- beforebegin
- 插入到该元素头标签之前
- afterbegin
- 插入到该元素头标签之后
- beforeend
- 插入到该元素尾标签之前
- afterend
- 插入到该元素尾标签之后
第二个参数是要插入的文本
作为纯文本的内容元素
Element对象的textContext属性可以获取标签内的纯文本,不包含子标签,但包含子标签的纯文本。
IE4中引入了innerText属性,和textContext功能相同,如果textContext不能使用就是用innerText属性。
作为Text节点的元素内容
nodeValue属性,它保存Text节点的内容。该属性可读/写。
CharacterData定义了data属性,它和nodeValue的文本相同。
创建、插入和删除节点
创建节点
document对象有几个方法可以创建节点:
createTextNode(“Text节点的内容”);
createElement(“创建节点的标签名”);
createDocumentFragment()创建一个DocumentFragment作为容临时容器
插入节点
Element对象的insertBefore()和appendChild()都可以添加节点成为自己的子节点。
appendChild()只有一个参数就是要添加的节点元素,该方法会将元素添加到尾部。
insertBefore()有两个参数,第一个参数是待插入的节点,第二个是已存在的节点,会将新节点插入到该节点前面。
如果调用appendChild()或insertBefore()将已存在文档中的一个节点再次插入,那个节点将自动从它当前的位置删除并在新的位置重新插入。
删除节点
在待删除节点的父节点上调用removeChild()方法可以,再将待删除节点作为参数传入就可删除节点。
n.parentNode.removeChild(n);
替换节点
replace()方法删除一个子节点并用一个新节点取而代之。在父节点上调用该方法,第一个参数为新节点,第二个参是需要代替的节点。
n.parentNode.replaceChild(document.createTextNode("aaaa"),n);
使用DocumentFragement
和Document节点一样,DocumentFragment是独立的,而不是任何其他文档的一部分。它的parentNode总是null。它可以有任意多的子节点。
DocumentFragment的特殊之处在于它使得一组节点被当做一个节点看待。如果给appendChild()、replaceChild()传递一个DocumentFragment,其实是将该文档片段的所有字节点插入到文档中,而非本身。
文档和元素的几何形状和滚动
文档坐标和视口坐标
文档坐标是针对整个文档而言
视口坐标是针对浏览器的视口而言
Window对象的pageXOffset和pageYOffset属性是普安段浏览器窗口滚动条的位置。
查看元素的几何尺寸
调用元素的getBoundingClientRect()方法可以获取一个代表元素几何尺寸的对象。获得的坐标是在视口中的位置
对象的返回值的属性
- left
- top
- right
- button
getClientRects()方法和getBoundingClientRect()方法类似,不过返回的是一个只读的类数组对象,每个对象和上面所返回的对象一样。如果一些标签被分成多块,那该返回会吧每一小块的对象都加入数组中。
滚动
Window对象的scrollTo()方法接收一个点的X和Y坐标,并作为滚动条的偏移量设置。坐标针对文档坐标。scroll()方法和该方法同义。
Window对象的scrollBy()和scrollT()方法一样,不过是针对视口坐标。
关于元素尺寸、位置和溢出的更多信息
offsetWidth
offsetHeight
offsetLeft
offsetTop
offsetParent
clientWidth
clientHeight
clientLeft
clientTop
scrollWidth
scrollHeight
scrollLeft
scrollTop
查询选取的文本
window.getSelection()方法返回一个Selection对象。toString()方法是Selection对象中最重要的也广泛实现了的特性,它返回选取的纯文本。