当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  代码如下:    20120430dom操作属性节点.htm            //Attr(属性)虽然是节点 但是不能用firstChild和childNodes等访问        function testBtn() {                //  var myNode = document.getElementById("btn");//得到element标签     ...

代码如下:




    20120430dom操作属性节点.htm
   
   
    //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("没有成功");
        }
   


第二章关于dom

dom简介


如何使用dom






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

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • Javascript 游戏引擎 cocos2d javascript
  • javascript eval换成document.write 显示原型
  • JavaScript的OAuth开发包 OAuth in JavaScript
  • 通过javascript库JQuery实现页面跳转功能代码
  • Javascript 调试插件
  • javascript操作html复选框checkbox:如何判断复选框是否被选中
  • JavaScript图表 JScharts
  • JavaScript实现页面跳转的几种方法(参考代码)
  • JavaScript 开发环境 UltraREPL
  • JavaScript中的消息框(警告框,确认框,提示框)语法
  • JavaScript 模板引擎 templayed.js
  • Pretty Beautiful Javascript
  • JavaScript 微处理器 Espruino
  • JavaScript InfoVis Toolkit
  • JavaScript 调试工具 JSDT
  • JavaScript图表组件 dhtmlxChart
  • javascript矩阵运算库 Sylvester
  • JavaScript开发插件 JSEclipse
  • JavaScript 的宏扩展 Sweet.js
  • 微软的 JavaScript 替代 TypeScript


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3