javascript学习-DOM获取和设置删除属性

获取节点的属性值

方式1：

    元素节点.属性名;
    元素节点[属性名];

方式2：

   元素节点.getAttribute("属性名称");

方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。
例子：

		<div id="d1">helloword1</div>
		<div id="d2">helloword2</div>
		<div id="d3">helloword3</div>
		<script type="text/javascript">
			var d1=document.querySelector('#d1');
			//获取属性值
			console.log(d1.id);
			console.log(d1['id']);
			console.log(d1.getAttribute('id'));
	   </script>

结果：

设置节点属性

方式1：

    元素节点.属性名=属性值；

方式2：

     元素节点.setAttribute("属性名称","属性值");

二者有区别，例子如下：

   <div id="d1">helloword1</div>
   <div id="d2">helloword2</div>
   <div id="d3">helloword3</div>
   <script type="text/javascript">
   var d1=document.querySelector('#d1');
   //设置属性值
   d1.id="dd1";
   d1['id']="dd1";
   d1.setAttribute("id","dd1");
  //默认元素中如果没有此属性，那么此属性只会创建在对象中，不会显示在元素的html上
   d1.anewpro1="abc";
  //默认元素中如果没有此属性，那么此属性不会创建在对象的属性中，会显示在html属性中
   d1.setAttribute("newpro2","abc");
   console.log(d1);
   console.log([d1]);
 </script>

结果：

删除节点的属性

 元素节点.removeAttribute(属性名);

总结：

获取节点的属性值和设置节点的属性值，都有两种方式，但这两种方式是有区别的。

• 方式一的元素节点.属性和元素节点[属性]:绑定的属性值不会出现在标签上。
• 方式二的get/set/removeAttribut: 绑定的属性值会出现在标签上。
• 方式一操作的是属性而已，方式二操作的是标签本身。

【注】这两种方式不能交换使用，比如，d1.abc=“xxx”,不能由d1.getAttribute(“abc”)获取