欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

javascript中对Attr(dom中属性)的操作示例讲解

程序员文章站 2023-11-18 16:41:04
代码如下:

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>20120430dom操作属性节点.htm</title>
    <meta  http-equiv="content-type" content="text/html; chareset=utf-8"/>
    <script type="text/javascript">
    //attr(属性)虽然是节点 但是不能用firstchild和childnodes等访问
        function testbtn() {
                //  var mynode = document.getelementbyid("btn");//得到element标签 
                //  var mynodename = mynode.nodename;//得到上述标签的名字为按钮
                //  var x = mynode.attributes["onclick"].nodetype;//atrributes为一个属性数组  本句话的意思是找到标签为'btn'的nodetype=2为属性
                // if (x == 2) {
                //   alert("您访问到的是一个属性节点！");
                // }
            //下面是对某节点属性的修改代码================================================================
            //============================================================================================
            var mynode = document.getelementbyid("btn");//得到element标签 
            var x = mynode.getattribute("id");//获取该标签的id属性
            mynode.setattribute("value", "test");//修改标签的id属性
            var y = mynode.getattribute("value");
            alert("id的属性由“" + x + "”变成了“" + y + "”");
            //下面是为某元素添加属性=====================================================================
            //============================================================================================
            var myatrr = document.createattribute("class");
            myatrr.nodevalue = "classstyle";
            mynode.setattribute(myatrr);

            //getattributenode 和getattribute的区别是获取属性值 - getattribute()
            //getattribute("") 方法返回属性的值。
            //获取属性值 - getattributenode()
            //getattributenode("") 方法返回属性节点，getattributenode('').value取得节点值。

 

            //对不同的结果不一样  在这里不做深入研究================================================
            if (mynode.getattributenode("class") != null)
                alert("添加成功！！");
            else
                alert("没有添加成功");
            //下面为移除属性的值==========================================================================
            //===========================================================================================
            //            mynode.removeattribute("class");
            //            if (mynode.getattribute("class") == null)
            //                alert("删除成功！！");
            //            else
            //                alert("没有成功");
            var delnode=mynode.getattributenode("class");
            if (mynode.getattribute("class") == null)
                alert("删除成功！！");
            else
                alert("没有成功");
        }
    </script>
</head>
<body>
<h1>第二章关于dom</h1>
<p id="p1">dom简介</p>
<p>如何使用<a href="#" name="link">dom</a></p>
<input id="btn"  type="button" onclick="testbtn()" value="测试"/>
</body>
</html>


注意区分后面有node和没有node的参数方法的区别。

上一篇： 在.Net中使用MongoDB的方法教程

下一篇： ASP.NET微信公众号添加菜单

推荐阅读