属性节点的操作(JS操作属性)（jQuery操作属性）（H5新增的属性操作）

首先,我们先搞清楚属性与属性节点是什么?

属性:
在对象中,我们说属性就是对象存储的数据,或则说对象身上保存的变量就是属性。在CSS的样式中，因为它也是键值对的形式，所以我们也称CSS样式属性。

操作属性的方法：

1、点语法： 对象.属性 = 属性值； （赋值）
对象.属性 (取值)

2、字符串语法： 对象[‘属性名称’] = 属性值； （赋值）
对象[‘属性名’] （取值）

属性节点：
一、在编写HTML的时候，我们写在HTML标签里面的属性就是属性节点。
html

<input type="checkbox" indexnum="{{ value.id }}">
//两个属性 type 和 indexnum

二、分类：

2.1标签属性分为四类：

// (1)行内标准属性：
	// 比如: id class style 
	<h3 class="name">布头儿</h3>
	
//（2）行内自定义属性
	// 比如：自定义的index属性，属性值是1
	<li index="1" >导航菜单</li>
	
// （3）js动态添加属性
	//点语法添加，既可以添加自定义也可以添加行内标准属性
	
	div.className = "box"; //类名是行内标准
	div.style.display = "none"; //设置显示模式
	
	div.dataNum = "1"; //自定义属性dataNum
	
// （4）行外属性
   //行外属性就是不在html标签中书写的属性，比如:内嵌式、外联式
   <style> 
    th,td {
      max-width: 420px;
    }
  </style>

三、操作属性的方法：

3.1 原生JS操作属性的方法：

3.1.1 点语法操作属性

//点语法操作属性：
	//可以获取到属性：标准的行内属性/点语法动态添加的属性
	
	div.ClassName = "box1"; //可以获取或修改
	
	div.dataNum = '1'; //动态添加dataNum属性
	div.dataNum; //打印出来是1,这是获取
	
	//不可以获取属性：行外属性/行内自定义的属性
	
	//如果是行内的自定义点语法拿不到
	<div index="123" ></div>
	document.querySelector('div').index; //这样获取不到内容

注意点：点语法动态添加属性是显示在行内的。

3.1.2 attribute方式

/*  获取属性：元素.getAttribute('属性名')
    添加属性：元素.setAttribute('属性名',属性值);
        * 用setAttribute方式添加只能用getAttribute获取
    删除属性： 元素.removeAttribute('属性名');
        * a.属性名属性值全部删除，更加彻底
        * b.点语法只能删除属性值，不能删除属性名
        * /
 
 /*
	利用attribute属性
	* 可以获取的内容： 行内标准，行内自定义，以及利用setAttribute方法设置的属性。
	* 不可以获取的内容： 行外属性，JS点语法动态添加的属性
	
*/

3.1.3 获取所有的样式方法：

使用window.getComputedStyle(‘要获取的元素’,null)

* 既能获取行内，也能获取内嵌（外联），是string
* 能获取任何属性，但是不能设置
* IE8及之前无法使用（浏览器兼容问题）
* IE8及之前使用 元素名.currentStyle[属性名] ,这种方式谷歌和火狐都不支持

3.1.4 点语法自定义的属性和attribute自定义属性的区别

//点语法设置的自定义属性是标签的一个属性,不会显示在行内
//attribute设置的属性会显示在行内

<div id="box1"></div>
<div id="box2"></div>

document.getElementById('box1').index = 1;
document.getElementById('box2').setAttribute('index', 1);

上面代码编译后的结果:

现在执行结果:

发现点语法添加的属性没有出现在行内,而attribute添加的却出现在行内:

现在打印各自的元素节点可以观察到:

console.dir(document.getElementById('box1'));
console.dir(document.getElementById('box2'));

我们发现:
box1的元素节点打印结果:

点语法动态添加的属性,作为元素节点的一个属性添加到元素上面,不显示在行内.
box2的元素节点打印结果:

arrtibute设置的属性作为元素节点里的attributes属性对象里的属性添加的.

总结: 两者的根本不同在于底层的不同.

3.1.5 两者添加属性不同的实例

          
    <input type="text" value="哈哈哈">
    
    <script>

    var input = document.querySelector('input');
    input.addEventListener('change', function() {
    	 //获取你一开始在标签上写的value属性值
        console.log(input.getAttribute('value'));
        //获取一开始在标签上写的type属性的值
        console.log(input.getAttribute('type'));
        // 但是表单输入的时候没有改变input标签上的value 改的是input js对象上的value 
        // 取表单输入的值使用input.value 不能使用getAttribute
        console.dir(input.value);

		//对应jQuery的方法
        // $(input).val()
        // $(input).attr('value')
    });
    </script>

3.2 jQuery里面获取属性的方法：

3.2.1 attr方法：

//1.1 设置单个属性
// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值

$obj.attr(name, value);

//1.2 获取单个属性

$obj.attr(name);

//2.1 设置多个属性(传入一个对象)
$obj.attr({
	name1 ：value1，
	name2 ：value2，
	.......
});

//3. 移出属性
// 参数：需要移除的属性名，
$obj.removeAttr(name);

3.2.2 jQuery针对CSS属性的操作，有专门的方法

//1. 设置单个属性
// name：需要设置的样式名称
// value：对应的样式值
$obj.css(name, value);

//2. 设置多个属性（传入一个对象）
$obj.css({
	name1 ：value1，
	name2 ：value2，
	.......
})

//3. 获取属性
$obj.css(name);

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代：

设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

3.2.3 jQuery针对class属性的操作，有专门的方法

//1. 添加类样式
// name：需要添加的样式类名，注意参数不要带点.
$obj.addClass(name);

//2.移出类样式
// name:需要移除的样式类名
$obj.removeClass('name');

//3.判断是否有类样式
// name:用于判断的样式类名，返回值为true false
$obj.hasClass(name)

//4.切换类样式
// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$obj.toggleClass(name);

下面介绍一个案例，获取input标签里面的自定义属性，用来拼接字符串。

input标签是由模板引擎art-template生成：

<!-- 准备一个内容模板 -->
<script type="text/html" id="tpl2">
/*循环遍历生成下面的模板*/
  {{ each list value key }}
    {{ if value.status == "held" }}
      <tr class="danger">
    {{ else }}
      <tr>
    {{ /if }}
    /*indexnum里放入的就是id*/
      <td class="text-center"><input type="checkbox" indexnum="{{ value.id }}"></td>
      <td>{{ value.author }}</td>
      <td>{{ value.content }}</td>
      <td>《{{ value.title }}》</td>
      <td>{{ value.created.slice(0,10).split("-").join('/') }}</td>
      {{ if value.status == "approved" }}
        <td>已批准</td>
      {{ else if value.status == "held" }}
        <td>未批准</td>
      {{ else  }}
        <td>已拒绝</td>
      {{ /if }}
      <td class="text-center">
        {{ if value.status == "approved" }}
         /* a标签的点击事件里放入的也是id */
          <a href="javascript:changecommentStatus( 'approved',{{ value.id }});" class="btn btn-warning btn-xs">批准</a>
        {{ else if value.status == "held" }}
          <a href="javascript:changecommentStatus( 'held',{{ value.id }});" class="btn btn-info btn-xs">拒绝</a>
        {{ /if }}
          <a href="javascript:changecommentStatus( 'trashed',{{ value.id }});" class="btn btn-danger btn-xs">删除</a>
      </td>
    </tr>
  {{ /each }}
</script>

部分JQuery代码：

$('tbody :checked').each(function(index,ele){

	 //第一种直接给input自定义的属性，使用它需要改模板里面的内容
      // console.log(ele.value);
      // str += ele.value + ",";

     
	 //第二种利用Jquery的attr方法来获取，注意each遍历出来的是原生的DOM,
	 //使用的时候要用$包起来 
      console.log($(ele).attr('indexnum'));
      str += $(ele).attr('indexnum') + ',';
      
      //第三种是使用原生的getAttribute方法来实现
      // console.log(ele.getAttribute('indexnum'));
      // str += ele.getAttribute('indexnum') + ",";
  
    });

这里特别注意jQuery里面的each方法是用来是显式迭代的，但是遍历出来的是DOM元素。

四、H5里面关于属性的操作：

在H5新增一个自定义属性的写法：

//自定义属性：不是标签自带的属性，我们开发者自己定义的

//这里就是自定义属性index，但是不是H5的

<li index="1" >导航菜单</li>

//H5新增属性的语法：data-属性名,属性名必须为小写

//这里面的data-index就是H5自定义的属性
<li id="li" data-index="1" >导航菜单</li>

//H5推出了一个专门取自定义属性的方法

//JS取值：元素.dataset.属性名

document.getElementById('li').dataset.index; //1

//jquery也为之设立了专门的方法

$(ele).data('属性名')
$('#li').data('index');