JavaScript attribute manipulation

First, the property of non-form elements

　　1, getting a property value

　　For some non-form element, you can be modified directly by a property value. These values ​​are usually href, title, alt, id, src and the like.

　　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, get the text value

　　　　Get content between the start and end tags in two ways: innerHTML and innerText

　　　Get the difference between :

• • 　the innerHTML : time to fetch the content if a label, the label will get to the page content, to obtain the contents intact
    
  •     innerText : time to fetch the content if the content of the label, the label will filter out, and the front and rear of the contents of line breaks and gaps are removed.

　　　Set difference :

• • 　 the innerHTML : set the content, if the label content will be parsed as HTML
    
  •     innerText : set the content, if the content tagged, the label will show up on the page

　　　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>

 

　　　　Extended: Use innerText can put the contents of the label appears on the page above. Label is not easy and would like displayed in the structure, the need to use HTML escape character.

　　　　Demo：

 

. 1 <b> 123 </ b> & quot;
 2 & lt; b & gt; // b the label appears
 . 3 1,231,231 

 

 

 

　　　　Popular HTML escapes

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

　　　　innerText and textContent

　　　　The same point : the label will filter out

　　　　innerText : blank lines before and after the change, and some removed, first appeared in the IE browser, the browser compatibility issues exist, the old version of the Firefox browser does not support innerText

　　　　textContent : content between the tags will output intact,

　　　　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，效率高。

二、表单元素的属性

三、自定义属性操作

四、样式操作

五、类名操作