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优化效率 提升性能解决方案
Sep 06 Javascript
validator验证控件使用代码
Nov 23 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
JavaScript实现前端倒计时效果
Feb 09 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查询搜索引擎排名位置的代码
2010/01/05 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
python之wxPython应用实例
2014/09/28 Python
python实现实时监控文件的方法
2016/08/26 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
详解python深浅拷贝区别
2019/06/24 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
在职证明书范本(2014新版)
2014/09/25 职场文书
朋友聚会开场白
2015/06/01 职场文书
运动会加油稿50字
2015/07/21 职场文书
人民币使用说明书
2019/04/17 职场文书