JavaScript 属性操作

一、非表单元素的属性

　　1、获取属性值

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

　　Demo：

1 <a id="a" href="http://www.baidu.com" title="百度">百度</a>
2 <script>
3     var a = document.getElementById('a');
4     console.log(a.id);
5     console.log(a.href);
6     console.log(a.title);
7 </script>

　　2、获取文本值

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

　　　获取区别：

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

　　　设置区别：

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

　　　Demo：

 1 <div id="main">
 2     <div>1</div>
 3     <div>2</div>
 4     <button type="button" id='btn'>点我</button>
 5     <a href="http:www.baidu.com" title="百度">百度</a>
 6 </div>
 7     
 8 
 9 <script type="text/javascript">    
10     var main = document.getElementById('main');
11     var a1 = main.innerHTML;
12     var a2 = main.innerText;
13     console.log(a1);
14     console.log(a2);
15 
16     main.innerText = "<b>javascript</b>"
17 </script>

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

　　　　Demo：

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

　　　　常用的 HTML 转义符

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

　　　　innerText 与 textContent

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

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

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

　　　　Demo：

 1 <div id="box">
 2     我是一个box
 3     <b>hello</b>
 4 </div>
 5 
 6 <script>
 7     var box = document.getElementById('box');
 8      console.log(box.innerText);
 9      console.log(box.textContent);
10      console.log(box.innerHTML);
11 </script>

　　　　innerText 的兼容处理：

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

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

　　　　　Demo：

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

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

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

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

二、表单元素的属性

三、自定义属性操作

四、样式操作

五、类名操作