十六、使用jQuery操作元素 —— DOM属性与HTML元素属性

时间:2022-09-16 23:00:58

在jQuery官方文档中,分别是这样对应的。属性:Attributes;CSS:CSS。

 

区分DOM属性和HTML元素属性

HTML元素的属性大家应该都知道,比如<img>元素的src,id等。

最终浏览器会解析HTML,构建DOM模型,也就是说浏览器会解析HTML元素为DOM元素。

javascript中获取到的都是DOM元素,而不是HTML元素。

HTML元素属性和DOM属性的名称和值大部分都相同,所以导致很多人都错误的认为两者是相同的。

区分HTML元素属性和DOM属性是一件很考验经验和记忆力的事情,那是曾经。现在jQuery的属性操作函数attr()就可以忘记这些差异。

 

使用javascript操作DOM属性

使用javascript操作DOM属性就是操作javascript对象的属性。javascript对象的属性是不需要声明的。有多种方式可以访问属性,如下:

myImg.src = "xxxxxx" //使用“.”运算符

myImg["src"] = "xxxxxx" // 使用属性访问器

var propName = "src";

myImg[propName] = "xxxxxx" //属性访问器支持变量

因为提供了属性访问器,所以可以通过下面的方式遍历一个DOM对象的所有属性:

var result = "";

for (var p in myImg)

{

result += "属性名:" + p + ",属性值:" + myImg[p] + "\n";

}

注意,事件或者函数也是对象的一个属性。如果一个对象是DOM对象,就默认情况下拥有很多的属性。

 

使用javascript操作HTML元素属性

使用javascript中的getAttribute和setAttribute,可以操作HTML元素属性。比如:

alert(myImg.getAttribute("class"));

myImg.setAttribute("class","myclass2");

通过改变HTML属性class,会改变相应的DOM元素的className属性。但不是所有的HTML元素都有对应的DOM属性。比如自定义的HTML元素属性就无法转换成DOM属性。再如元素属性"className"就比较特别,因为className是和HTML的class对应的。

 

在FireBug和IE Developer Tool中的HTML内容窗口都有了变化。