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

二、表单元素的属性

　　1、value

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

　　　Demo：

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

　　2、type

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

　　　Demo:

1 <input type="text"  id="txt" value='123'>
2 <script>
3     var txt = document.getElementById('txt');
4       console.log(txt.value);
5       console.log(txt.type);
6 </script>

　　3、disabled 禁用属性

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

　　　Demo:

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

　　4、checked 复选框选中属性

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

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

　　5、selected 下拉菜单选中属性

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

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

三、自定义属性操作

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

　　 Demo：

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

　　1、获取自定义属性的值

　　　　语法格式：

变量名.getAttribute(属性名)；

　　2、设置自定义属性的值

　　　　语法格式：

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

　　3、移除自定义属性的值

　　　　语法格式：

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

四、样式操作

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

　　Demo：

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

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

五、类名操作

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

　　Demo：

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

 

posted on 2019-08-25 11:29  格物致知_Tony  阅读(332)  评论(0)  编辑  收藏  举报