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


Posted in Javascript onDecember 02, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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的参数方法的区别
Javascript 相关文章推荐
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
浅析jquery的作用与优势
Dec 02 #Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 #Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 #Javascript
jquery中的过滤操作详细解析
Dec 02 #Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 #Javascript
用JS实现3D球状标签云示例代码
Dec 01 #Javascript
js arguments,jcallee caller用法总结
Nov 30 #Javascript
You might like
php 分页原理详解
2009/08/21 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Javascript Global对象
2009/08/13 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
python如何代码集体右移
2020/07/20 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
小学生操行评语
2014/04/22 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
2019消防宣传标语!
2019/07/10 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript