JavaScript 属性操作

一、非表单元素的属性

　　1、获取属性值

　　对于一些非表单的元素，可以直接通过属性来修改其值。这些值通常有 href、title、alt、id、src 等。

　　Demo：

<a id="a" href="http://www.baidu.com" title="百度">百度</a>
<script>
    var a = document.getElementById('a');
    console.log(a.id);
    console.log(a.href);
    console.log(a.title);
</script>

　　2、获取文本值

　　　　获取开始标签和结束标签之间的内容有两种方法：innerHTML 和 innerText

　　　获取区别：

• • 　innerHTML：获取内容的时候，如果内容中有标签，会把标签页获取到，原封不动的把内容获取到
    
  •     innerText：获取内容的时候，如果内容中有标签，会把标签过滤掉，并且把内容前后的换行和空白都去掉。

　　　设置区别：

• • 　 innerHTML：设置内容，如果内容中有标签，会以 HTML 方式来解析
    
  •     innerText：设置内容，如果内容中带标签，会在网页上把标签显示出来

　　　Demo：

<div id="main">
    <div>1</div>
    <div>2</div>
    <button type="button" id='btn'>点我</button>
    <a href="http:www.baidu.com" title="百度">百度</a>
</div>
    

<script type="text/javascript">    
    var main = document.getElementById('main');
    var a1 = main.innerHTML;
    var a2 = main.innerText;
    console.log(a1);
    console.log(a2);

    main.innerText = "<b>javascript</b>"
</script>

　　　　扩展：使用 innerText 可以把内容中的标签在网页上面显示出来。而想在结构中显示标签并不容易，需要用到 HTML 转义符。

　　　　Demo：

<b>123</b> &quot;
&lt;b&gt;            // 把 b 标签显示出来
1231231 

　　　　常用的 HTML 转义符

"		&quot
'		&apos
&		&amp
<		&lt   // less than  小于
>		&gt   // greater than  大于
空格	        &nbsp
©		&copy

　　　　innerText 与 textContent

　　　　相同点：都会把标签过滤掉

　　　　innerText ：前后的空白和一些换行去掉，最早出现在 IE 浏览器中，存在浏览器兼容问题，老版本的 Firefox 浏览器不支持 innerText

　　　　textContent： 会把标签之间的内容原封不动的输出，

　　　　Demo：

<div id="box">
    我是一个box
    <b>hello</b>
</div>

<script>
    var box = document.getElementById('box');
     console.log(box.innerText);
     console.log(box.textContent);
     console.log(box.innerHTML);
</script>

　　　　innerText 的兼容处理：

　　　　　如何知道浏览器是否支持元素的某个属性呢？

　　　　　可以通过 typeof 来测试，当属性不存在的时候会返回的是 undefined ；存在的时候返回的是该属性的类型。

　　　　　Demo：

var box = document.getElementById('box');
 // 当属性不存在的时候返回的是  undefined
     console.log(typeof box.a);
 // 当属性存在的时候返回的是 该属性的类型
     console.log(typeof box.id);

　　　　对于不支持 innerText 的浏览器的兼容处理：

　　// 处理innerText的兼容性问题
    function getInnerText(element) {
      // 判断当前浏览器 是否支持元素的innerText属性，支持innerText 使用element.innerText获取内容
      // 如果不支持innerText属性，使用element.textContent获取内容
      
      if (typeof element.innerText === 'string') {
        return element.innerText;
      } else {
        return element.textContent;
      }
    }

　　　　Tips：当给元素设置内容的时候，如果设置不含标签的内容的时候应该使用innerText，效率高。

二、表单元素的属性

　　1、value

　　　　该属性可以用于大部分表单元素的内容获取或设置（option除外）

　　　Demo：

<input type="text"  id="txt" value='123'>
<script>
    var txt = document.getElementById('txt');
      // 设置文本框中的内容
    txt.value = 'hello world';
</script>

　　2、type

　　　　可以获取或设置 input 标签的类型（输入框或复选框等）

　　　Demo:

<input type="text"  id="txt" value='123'>
<script>
    var txt = document.getElementById('txt');
      console.log(txt.value);
      console.log(txt.type);
</script>

　　3、disabled 禁用属性

　　　　该值设置元素是否可用，可以让属性值等于该属性。也可以为该值的属性值设置为一个布尔值。

　　　Demo:

<input type="text"  id="txt" value='123'>
<script>
     var txt = document.getElementById('txt');
     console.log(txt.disabled);
     txt.disabled = 'disabled';       // 与下一行代码效果相同，都是设置为不可用
     txt.disabled = true;
</script>

　　4、checked 复选框选中属性

　　　　为复选框设置是否为选中状态，可以让属性值等于该属性。也可以为该值的属性值设置为一个布尔值。　

变量.checked = true;
变量.checked = 'checked';

　　5、selected 下拉菜单选中属性

　　　　为下拉菜单某一项设置为选中状态，可以让属性值等于该属性。也可以为该值的属性值设置为一个布尔值。

变量.selected = true/false;
变量.selected = 'selected';

三、自定义属性操作

　　　获取标签自有的属性，可以直接通过 变量.属性 来获取，但是对于自定义属性并不支持这种获取方式。

　　 Demo：

<div id="box" age="18" personId="1">张三</div>
<script>
    var box = document.getElementById('box');
    console.log(box.id);        // box
    console.log(box.age);       // undefined
    console.log(box.personId);  // undefined
</script>

　　1、获取自定义属性的值

　　　　语法格式：

变量名.getAttribute(属性名)；

　　2、设置自定义属性的值

　　　　语法格式：

变量名.setAttribute(属性名,value)；

　　3、移除自定义属性的值

　　　　语法格式：

变量名.removeAttribute('属性名')；

四、样式操作

　　 使用 style 方式设置的样式显示在标签行内。

　　Demo：

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

　　　注意：使用 style.属性 获取的是标签中的 style 属性（行间样式）设置的样式属性的值，如果没有设置，获取空字符串。

五、类名操作

　　 修改标签的 className 属性相当于直接修改标签的类名。（因为 class 是关键字，不能使用，所以使用 className 来代替 class）

　　Demo：

var box = document.getElementById('box');
box.className = 'show';