标签：content javascrip 空白 undefined pre 单元素 一个 == 定义
对于一些非表单的元素，可以直接通过属性来修改其值。这些值通常有 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>
获取开始标签和结束标签之间的内容有两种方法：innerHTML 和 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> "
2 <b> // 把 b 标签显示出来
3 1231231
常用的 HTML 转义符
" "
‘ &apos
& &
< < // less than 小于
> > // greater than 大于
空格  
© ©
相同点：都会把标签过滤掉
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，效率高。
标签：content javascrip 空白 undefined pre 单元素 一个 == 定义
原文地址：https://www.cnblogs.com/niujifei/p/11407338.html
