Element 对象
什么是Element对象
Element对象就是你通过document.getELementById()获取的对象,这个对象其实就是html标签元素。
获取html标签里的特性值
1.用元素的属性来获取特性值
<div id="shit" align="left" class="shit" title="fuckyou">HelloWorld</div>
<script>
var div = document.getELementById("shit");
</script>
上面的div变量就是Element对象。获取标签元素后,我们还可以通过元素属性来获取标签里的特性的值。如一下代码示例:
<div id="shit" align="left" class="shit" title="fuckyou">HelloWorld</div>
<script>
div = document.getElementById("shit");
alert(div.id);
alert(div.className);
alert(div.align);
alert(div.title);
</script>
如上所示我们可以通过 div.
+ 属性
的方法来获取html标签里的属性的值。
当然,像下面这样通过为每个属性赋予新的值,也可以修改对应的每个特性:
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.align = "right";
2.用getAttribute()获取特性值
除了用 div.id
的方式获取html标签特性值,我们还可以用div.getAttribute()来获取特性值。
注意: 传递给 getAttribute()的特性名与实际的特性名相同。
<div id="shit" align="left" class="shit" title="fuckyou">HelloWorld</div>
<script>
div = document.getElementById("shit");
alert(div.getAttribute("id"));
alert(div.getAttribute("align");
alert(div.getAttribute("class"));
alert(div.getAttribute("title");
</script>
html元素标签的attributes属性
Element对象还有一个attributes属性,他返回一系列html标签中的特性节点,nodeName就是特性的名称,nodeValue就是特性的值。
attributes属性还有以下方法:
var id = div.attributes.getNamedItem("id").nodeValue;
如上,可以通过这样来获取div的id特性值。
var id = div.attributes["id"].nodeValue;
如上,还可以通过方括号来访问特性值。
div.attributes["id"].nodeValue = "someOtherId";
如上,我们还可以这样来为特性设置新值。
创建元素 document.createElement()
我们可以通过 document.createElement()
来创建元素节点,传入元素对应名字到参数里即可。
var div = document.createElement("div");
创建完后还可以对节点进行特性设置:
div.id = "myNewDiv";
div.class = "divClass";
新元素上设置这些特性只是给它们赋予了相应的信息。由于新元素尚未被添加到文档树中,因此设置这些特性不会影响浏览器的显示。要把新元素添加到文档树,可以使用appendChild()
、insertBefore()
或 replaceChild()
方法。
var div = document.createElement("div");
div.id = "myNewDiv";
div.class = "divClass";
document.body.appendChild(div);//这样会在body中添加这个div
注意:对元素子节点进行操作时,一定要先判断元素的nodeType类型:
for (var i=0, len=element.childNodes.length; i < len; i++){
if (element.childNodes[i].nodeType == 1){
//执行某些操作
}
}