码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 属性操作

时间:2019-08-25 11:51:00      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:content   javascrip   空白   undefined   pre   单元素   一个   ==   定义   

一、非表单元素的属性

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

二、表单元素的属性

三、自定义属性操作

四、样式操作

五、类名操作

JavaScript 属性操作

标签:content   javascrip   空白   undefined   pre   单元素   一个   ==   定义   

原文地址:https://www.cnblogs.com/niujifei/p/11407338.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!