在页面中操作DOM元素一、操作元素的特性、属性和数据

程序员文章站 2022-05-08 16:13:29

...

元素的特性attributes和属性properties：

1. attribute翻译为特性，是HTML标签内自带的属性（如id、name、value…）
2. property翻译为属性，HTML标签元素返回为Dom元素后，Dom元素作为一个对象，给这个Dom对象重新添加的属性。（如firstChild、lastChild…）
3. HTML标签默认自带的属性也添加到了Dom的属性中，也可以通过“.”运算符来获取设置属性。但要注意特性“class”添加到Dom属性中后变为“className”；
4. 自定义的HTML标签属性不能添加到Dom的属性中，也不能通过“.”运算符来获取设置该属性。

特性的值为字符串。
属性可以为boolean、number、字符串、对象等。

联系：

常用的Attribute，例如id、class、title等，已经被作为属性（property）附加到DOM对象上，可以和Property一样取值和赋值。

但是自定义的特性（attribute），就不会有这样的特殊优待。

规律：

HTML元素的固有属性，使用属性（property）方法。

HTML元素自定义的DOM属性，使用特性（attribute）方法。

属性也好，特性也罢，值为字符串以外的形式，使用属性（property）方法。

JS设置特性值

setAttribute( )  设置

getAttribute( )  获取

JS设置属性值

 .特性名 = '特性值'  设置

 .特性名            获取

特性（attributes）

获取特性值

attr(属性名)

注意，如果是class，需要写成className。

设置特性值

    attr(属性名，属性值)         一次一个

    attr({属性名:属性值，...})   一次多个

删除特性

    removeAttr(属性名)  如果多个，用空格隔开

属性（properties）

获取属性值

prop(属性名)

注意，如果是class，需要写成className。

设置属性值

    prop(属性名，属性值)         一次一个

    prop({属性名:属性值，...})   一次多个

删除属性值

    removeProp(属性名)  注意，一次一个！

<img src="dog.jpg" alt="jQuery" id="logo" class="img-jquery" title="jQuery logo"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //特性
        var img=document.getElementById('logo');
        console.log(img.attributes)
        console.log(img.getAttribute('class'));
    })
</script>

在页面中操作DOM元素一、操作元素的特性、属性和数据

<body>
<img src="dog.jpg" alt="jQuery" id="logo" class="img-jquery" title="jQuery logo"/>
<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px" title="Check this!" description="just a checkbox" checked/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){

        var checkbox=document.getElementById('check');
        console.log(checkbox.tabIndex)//属性
        console.log(checkbox.getAttribute('tabindex'));//特性

        console.log(checkbox.style)//属性
        console.log(checkbox.getAttribute('style'));

        console.log(checkbox.checked)//属性
        console.log(checkbox.getAttribute('checked'));//返回空。如果checked="true",则为true.

    })

在页面中操作DOM元素一、操作元素的特性、属性和数据

元素的特性和属性有一种动态链接的关系，他们中有一个有变化，另一个也变化。

他们的同步规则:

如果attributes是本来在DOM对象中就存在的，attributes和properties的值会同步。
如果attributes是本来在DOM对象中就存在的，但是类型为Boolean，那么attributes和properties的值不会同步。
如果attributes是在DOM对象内建的属性，attributes和properties的值不会同步。description。因为description不是input内建的属性。

 var img=document.getElementById('logo');

        console.log(img.src)
        console.log(img.getAttribute('src'));

        img.src='../logo.jpg'
        console.log(img.src)
        console.log(img.getAttribute('src'));

在页面中操作DOM元素一、操作元素的特性、属性和数据

 var img=document.getElementById('logo');
console.log(img.class)
console.log(img.getAttribute('class'));

在页面中操作DOM元素一、操作元素的特性、属性和数据

img.class为undefined的原因是class是保留字。我们应该写成img.className

我们一般操作特性。特殊才操作属性。

attribute特性和property属性都称为属性。

操作元素的特性：

获取特性的值：attr(name)
设置特性的值：attr(name,value) attr(attributes)
删除特性：removeAttr(name)

<img src="dog.jpg" alt="jQuery" id="logo" class="img-jquery" title="jQuery logo"/>
<img src="dog.jpg" alt="jQuery" id="logo2" class="img-jquery2" title="jQuery logo2"/>
<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px" title="Check this!" description="just a checkbox" checked/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
    var img1=document.getElementById('logo');
        console.log(img1.title);//jQuery logo

        //特性的名称不区分大小写。
        var img=$('img');
        console.log(img.attr('title'));//jQuery logo
        /*init(2) [img#logo.img-jquery, img#logo2.img-jquery2, selector: "img", context: document]
         0:img#logo.img-jquery
         1:img#logo2.img-jquery2
         context:document
         length:2
         selector:"img"
         __proto__:Object(0)*/
        console.log(img.attr('title','123'));
        console.log(img.attr('title'));//123

        var checkbox=document.getElementById('check');
        console.log(checkbox.checked)//true
        console.log(checkbox.getAttribute('checked'));//返回空
        var checkbox=$('#check');
        console.log(checkbox.attr('checked'));//true

    })

<img src="dog.jpg" alt="jQuery" id="logo" class="img-jquery" title="jQuery logo"/>
<img src="dog.jpg" alt="jQuery" id="logo2" class="img-jquery2" title="jQuery logo2"/>
<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px" title="Check this!" description="just a checkbox" 
checked="true"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
    var img1=document.getElementById('logo');
        console.log(img1.title);//jQuery logo

        //特性的名称不区分大小写。
        var img=$('img');
        console.log(img.attr('title'));//jQuery logo
        /*init(2) [img#logo.img-jquery, img#logo2.img-jquery2, selector: "img", context: document]
         0:img#logo.img-jquery
         1:img#logo2.img-jquery2
         context:document
         length:2
         selector:"img"
         __proto__:Object(0)*/
        console.log(img.attr('title','123'));
        console.log(img.attr('title'));//123

        var checkbox=document.getElementById('check');
        console.log(checkbox.checked)//true
        console.log(checkbox.getAttribute('checked'));//true
        var checkbox=$('#check');
        console.log(checkbox.attr('checked'));//true

    })

 var checkbox=$('#check');
        console.log(checkbox.attr('checked'));//如果页面上没有checked时，结果为false。
        checkbox.checked=true;
        //特性值没有改变，属性值改变
        console.log(checkbox.attr('checked'));//false
        console.log(checkbox.checked);//true

要想特性值改变，用.attr("title","new title")；

 var img=$('img');
        img.attr('title','new title');
        img.attr({
            title:'new title',
            alt:'new alt',
            tabindex:'2'
        });

通过函数设置特性：比较灵活，可以做些操作和判断。

 var img=$('img');
        img.attr('title',function(index,previousValue){
            console.log(previousValue);
            return previousValue+"_____new ";
        });

在页面中操作DOM元素一、操作元素的特性、属性和数据

删除特性：

 img.removeAttr("title");

操作元素的属性：区分大小写。

获取属性的值：prop(name)
设置属性的值：prop(name，value) prop(properties)

添加并移除名为 "color" 的属性：


$("button").click(function(){
    var $x = $("div");
    $x.prop("color","FF0000");
    $x.append("The color 属性： " + $x.prop("color"));
    $x.removeProp("color");
});



<button>添加和删除属性</button>
<br><br>
<div></div>