获取页面I属性D为test的元素：

1
2
3
4
document.getElementById("test");
//or
document.querySelector("#test");
document.querySelectorAll("#test")[0];

获取页面class属性为”red”的元素:

1
2
3
4
5
document.getElementsByClassName('red')
//or
document.querySelector('.red')
//or
document.querySelectorAll('.red')

++++++++++++++++++++++++++++++++++++++++++++
获取dataset属性的例子：FireFox 4下面不支持

1
2
3
<div id="zdz" data-name-zdz="zhongdezong1" data-age="26">
    data-set-test1
</div>

获取某个属性值：

1
2
3
var dom = documenty.getElementById("zdz");
var domVal = dom.dataset.nameZdz;//注意连字符号的必须用驼峰来取值。
var domAge = dom.dataset.age;

等价于===》

1
2
3
4
5
var selector = '[data-name-zdz]';
var dom = document.querySelector(selector);
//var dom = document.querySelectorAll(selector);//存在多个的情况下
var domVal = dom.dataset.nameZdz;//注意连字符号的必须用驼峰来取值。
var domAge = dom.dataset.age;

//删除某个dataset属性

1
delete dom.dataset.age;

跟getAttribute相比。data的速度快，代码也明朗。在不知道浏览器是否支持data的情况下：

1
2
3
4
5
6
var dom = documenty.getElementById("zdz");
if(dom.dataset){
    dom.dataset.name = 'zhongdezong';
}else{
    dom.setAttribute('data-name', 'zhongdezong');
}

css中的data属性
html代码：

1
<div class='zdz' data-name="钟德宗"></div>

css代码：

1
2
3
4
5
6
7
.zdz{
    width:100px;
    height:100px;
}
.zdz[data-name="钟德宗"]{
    background-image:url(./bg.jpg) no-repeat;
}

1
2
3
4
5
6
7
8
9
getBoundingClientRect(); //取得元素在屏幕的位置信息

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离
1
parentDom.insertBefore(newChildDom, allChildDom);//将一个新的子元素，插入另一个子元素的前面