选取文档元素
通过id选择元素,在同一个文档中id值必须唯一。如果要根据一组id查找对应的元素,可以使用这样一个函数
function getElements(id1, id2, id3...){
var elements = {};
for(var i = 0; i < arguments.length; i++){
//取出所有id
var id = arguments[i];
var item = document.getElementById(id);
if(item == null)
throw new Error('No element with id:' + id);
elements[id] = item;
}
return elements;
}
在低于IE8版本的浏览器中,getElementById()对匹配元素的ID不区分大小写,而且也返回匹配name属性的元素,所以尽量不要将name属性和id属性写成一样
getElementsByName定义在HTMLDocument类中,而不在Document类中,所以它只针对HTML文档可用(XML就不能使用)。
getElementsByTagName可以用来获取所有文档元素
var all = document.getElementsByTagName('*');
all; // [html, head, meta, body, script, ...]
HTMLDocument类定义了一些快捷属性来访问节点,比如
document.forms.id
文档结构和遍历
document对象,element对象和表示文本的text对象都是Node对象。Node对象有以下几个属性
parentNode
//该节点的父节点,document对象的父节点是null(不用考虑空格节点)
childNodes
//只读的类数组对象(NodeList对象),包括了空格节点,所以我们会封装childElements来去掉空格节点(对nodeType进行判断)
firstChild,lastChild
//该节点的子节点的第一个和最后一个,如果没有的话为null。这里同样包括了空格节点
nextSibling,previousSibling
//具有相同父节点的两个节点为兄弟节点,这里同样包括了空格节点
nodeType
//该节点的类型,9代表document节点,1代表element节点,3代表text节点,11代表documentFragment节点
nodeValue
//只有text节点和comment节点有这个属性,代表文本内容
nodeName
//元素的标签名,以大写形式标识
当我们想忽略文本内容和空白时,可以封装一些函数
function parent(e, n){
//n代表往上搜寻的层级
if(n === undefined) n = 1;
while(n-- && e) e = e.parentNode;
//null和document,documentFragment返回null
if(!e || e.nodeType !== 1) return null;
return e;
}
关于Node对象的其他属性可以参考文档Element属性与方法
属性
有些属性在js中是保留字,比如html的for属性(label元素),所以在js中变成了htmlFor,这就是React中的JSX的写法。元素的style属性只能获取到html中的内嵌样式,但是可以对样式进行修改,而且优先级最高。
创建,插入和删除节点
创建节点主要是createElement
方法和createTextNode
方法。还有一个cloneNode
可以对一个节点进行深拷贝。
插入节点主要使用appendChild
和 insertBefore
方法
删除节点是在元素的父节点上调用replaceChild
和 removeChild
方法,比如我们要删除节点b
b.parentNode.removeChild(b)
查询元素的几何尺寸
判定一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect
方法,它不需要参数,返回一个有left,right,top和bottom属性的对象。left和top属性表示元素的左上角的X和Y坐标,right和bottom属性代表元素的右下角的X和Y坐标
var box = e.getBoundingClientRect();
var w = box.width || (box.right - box.left);
var h = box.height || (box.bottom - box.top)
兼容性更好的是使用offsetLeft和offsetTop属性,如果想得到文档坐标,可以封装这样一个方法
function getElementPosition(e){
var x = 0, y = 0;
while(e != null){
x += e.offsetLeft;
y += e.offsetTop;
//offsetParent属性指定offsetTop这些属性所相对的父元素
e = e.offsetParent;
}
return {x: x, y: y };
}