JS之获取属性总结

Posted 2020-07-31 全凭一口仙气儿活着

       嗨，我是沐晴，今天来说说JS中关于获取属性的一些方法和区别。闲话不说，来正题。

      首先什么是属性呢，比如input标签，标签中的value id type style等，这些就是属性。我们JS获取属性一般有三种方法：

    1  通过点的方式

    2 通过括号的形式

    3 通过 DOM的方式

通过栗子说明：

<input type="text" value="hello" id="text"/>
var oText = document.getElementById("text")

1  通过点的方式    oText.value    

需要注意的是：

1  点要查找的是JS中本来就存在的属性名，不能找到变量或者函数的参数。比如下面

增加代码：
var  name = "value"
oText.name    
//这种方式访问就会出错，因为点的方式访问，它会去input的标签里面直接到有没有name的属性，如果没有就找不到，所以访问不到我们定义的这个变量的值    
//而且如果name是某个函数的参数也不可以获取到，原理是一样的。所以封装函数属性需要作为参数的时候，访问的时候不要用点，用括号

 2  标准浏览器下无法访问html中的自定义属性，可以获取通过JS参加的自定义属性

 3  无法获取相对网址  比如img.src  获取的只是绝对路径

2 通过括号的形式   oText.value 

  1可以访问任何变量，也可以访问参数

 2  标准浏览器下无法访问html中的自定义属性，可以获取通过JS参加的自定义属性（同上）

 3  无法获取相对网址  比如img.src  获取的只是绝对路径（同上）

3 通过DOM的方式

  涉及到三个方法

获取属性的值：getAttribute(属性名) oText.getAttribute(‘value‘)
设置属性的值：setAttribute(属性名, 要设置的值) oText.getAttribute(‘value‘,‘hello‘)
删除：removeAttribute(属性名) oText.getAttribute(‘value‘)

 

相比于上面的优势：

1 可以获取html中自定义的属性

2 获取的是相对网址，不过 IE7以下还是绝对网址

3 IE下可以通过style访问

 

<input type=‘text‘ style=‘width:100px;‘ />
var oText = document.getElementById("text")
//IE下可以这样用：oText.style.getAttribute(‘width‘) 标准浏览器不可以

 

 

一般情况下，用第三种方法的时候并不多，所以能用简单的方法就用简单的，按需要使用。。。。