DOM修改

对于DOM标准来说，核心DOM可操作一切结构化文档的API包括HTML和XML，它的范围更广。而对于HTML DOM，它是专门操作HTML文档的简化版DOM，仅对于常用的复杂的API进行了简化，范围限于HTML。而在开发过程中，我们要根据实际情况合理地分配和选择，尽量用最小的开销达到最大的效果，以快速实现效果为原则.

下面介绍4个核心DOM的操作

1读取属性值

（1）先获取节点对象，再通过对象获取属性值

获取节点
var attrNode=elem.attributes[下标/属性名]
var attrNode=elem.getAttributeNode（属性名）

获取节点值value
var val=attrNode.value

<body>
<ul id="myList">
	<li id="m1">Web Design</li>
	<li id="m2">HTML</li>
	<li id="m3">CSS</li>
</ul>

<script type="text/javascript">
	var ul=document.getElementById("myList");//查找document下id为mylist的元素
	var Node=ul.attributes[0];
	alert(Node);//[object Attr]

	var Node=ul.attributes["id"];
	alert(Node);//[object Attr]

	var Node=ul.attributes[1];
	alert(Node);//undefined

	var Node=ul.getAttributeNode("id");
	alert(Node);//[object Attr]
	alert(Node.value);//myList
</script>
</body>

（2）直接获取属性值

var value=elem.getAttribute(“属性名”)

<body>
	<ul id="myList">
		<li id="m1">Web Design</li>
		<li id="m2">HTML</li>
		<li id="m3">CSS</li>
	</ul>

	<script type="text/javascript">
		var ul=document.getElementById("myList");//查找document下id为mylist的元素
		var value=ul.getAttribute("id");
		alert(value);//myList
	</script>
</body>

2. 修改属性值

elem.setAttributeNode（“name”,value）

将elem对象中的name属型名设置为value

<body>
<ul id="myList">
	<li id="m1">Web Design</li>
	<li id="m2">HTML</li>
	<li id="m3">CSS</li>
</ul>

<script type="text/javascript">
	var ul=document.getElementById("myList");//查找document下id为mylist的元素
	ul.setAttributesNode("id",hisList);
	var value=ul.getAttribute("id");
	alert(value);
</script>
</body>

3.判断属性是否存在

elem.hasAttribute（“name”）

判断elem中是否有属性名为“name”的元素，返回值为bool类型

<body>
	<ul id="myList">
		<li id="m1">Web Design</li>
		<li id="m2">HTML</li>
		<li id="m3">CSS</li>
	</ul>
	<script type="text/javascript">
		var ul=document.getElementById("myList");//查找document下id为mylist的元素
		alert(ul.hasAttribute("id"));//true
	</script>
</body>

4.移除属性

elem.removeAttribute（“name”）

移除elem中是否有属性名为“name”的元素

<body>
	<ul id="myList">
		<li id="m1">Web Design</li>
		<li id="m2">HTML</li>
		<li id="m3">CSS</li>
	</ul>
	<script type="text/javascript">
		var ul=document.getElementById("myList");//查找document下id为mylist的元素
		alert(ul.hasAttribute("id"));//true
		ul.removeAttribute("id");//移除id属性
		alert(ul.hasAttribute("id"));//false
	</script>
</body>

5.修改样式

通过elem.style.name修改

属性名name的格式要去掉横线，并且采用驼峰命名法:
css:background-color=>backgroundColor;
list-style-type=>listStyleType;

One of three_tigers

发布了101 篇原创文章 · 获赞 56 · 访问量 5296

私信关注