DOM操作之Element类型对象

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){
		//执行某些操作
	}
}