• js


    节点操作

    创建节点:

    document.createElement("BUTTON");//创建元素节点
    document.createTextNode("CLICK ME");//创建文本节点

    元素添加:

    元素节点.innerHTML="HTML代码"
    例子:
    document.querySelector("[class=pd]") .innerHTML="<p></p>"
    
    元素节点.appendChild(p)(参数为节点)
    例子:
    p=document.createElement("p")
    document.querySelector("[class=pd]") .appendChild(p)
    
    
    p=document.getElementsByClassName("pd")[0]
    pr=document.createElement("p")
    pi=document.getElementsByTagName("p")[0]
    p.insertBefore(pr,pi)
    

      

    删:

    node.removeChild(node)
    例子:
    p=document.getElementsByClassName("pd")[0] pi=document.getElementsByTagName("p")[0] p.removeChild(pi)

      

    改:

    document.getElementById("myList").replaceChild(newnode,oldnode);
    例子:
    p=document.getElementsByClassName("pd")[0]
    pr=document.createElement("p")
    pi=document.getElementsByTagName("p")[0]
    p.replaceChild(pr,pi)
    

      

      

    查:

    直接获取元素节点
    document.getElementById(id); //返回对拥有指定id的第一个对象进行访问(所有浏览器支持)
    
    document.getElementsByName(name); //返回带有指定名称的节点集合 (所有浏览器支持)
    
    document.getElementsByTagName(tagname); //返回带有指定标签名的对象集合 (所有浏览器支持)
    
    document.getElementsByClassName(classname); //返回带有指定class名称的对象集(最低ie9)合 
    document.querySelector("[class=pd]") .innerHTML="<p></p>"只获取第一个匹配的元素(最低ie8)
    document.querySelectorAll("[class=pd]") .innerHTML="<p></p>"获取所有匹配到的元素(最低id9)

       document.documentElement是专门获取html这个标签的//获取html的方法(document.documentElement)

       document.body是专门获取body这个标签的。//获取body的方法(document.body)


    间接获取元素节点 属性: 元素节点.childNodes,或取该元素节点下的所有子节点;(所有节点,包括文本节点) 元素节点.children,或取该元素节点下的所有子节点;(只包括元素节点) 元素节点.firstChild,获取该元素节点的第一个子节点; 元素节点.lastChild,获取该元素节点的最后一个子节点; 元素节点.parentNode,获取该元素的父节点; 方法: 元素节点.hasChildNodes()判断元素节点存在 例子:document.getElementById("myList").hasChildNodes()(存在子节点返回true,否者返回false)

      

      

    属性操作 

    创建文本节点:create_text_p=document.createTextNode("<p></p>")
    创建元素节点:create_p=document.createElement("p")
    创建属性节点:    p=document.createAttribute("name")
        为创建的元素赋值:p.value="ju"
    获取属性节点:(参数为需要获取的属性)(return有返回获取的属性值,属性不存在返回null)
    document.getElementsByClassName("pd")[0].getAttribute("class")
    修改元素节点属性:(参数为属性节点) 
      document.getElementsByClassName("pd")[0].setAttributeNode(p)
    修改元素节点属性:(参数为字符串)(推荐)
      document.getElementsByClassName("pd")[0].setAttribute("p","helo")
    移除属性:
      document.getElementsByClassName("pd")[0].removeAttribute("class")

      

    css操作:

    行内样式:就是代码写在具体网页中的一个元素内;比如:<div style="color:#f00"></div>
    内嵌式:就是在</head>前面写;比如:<style type="text/css">.div{color:#F00}</style>
    外部式:就是引用外部css文件;比如:<link href="css.css" type="text/css" rel="stylesheet" />

    获取:

    元素节点.style.backgroundColor(单个元素,只能获取行内样式,如果样式是js中的关键字 则需要在样式前+css,如果样式由下划线连接 则需要去掉下划线将后面的单词首字母变为大写)(元素节点.style=null  |  元素节点.style="")

    元素节点..style.cssText="40%; height:10%"(css集合,只能获取行内样式)

    设置:

     
    元素节点.style.backgroundColor=“red”(单个元素 操作行内样式)
    元素节点.style.cssText(css集合,操作行内样式)
     
     操作内嵌式css:(只限内嵌式,根据css选择符选择,不包括外部式)
    function getstyle(sname) { 
        for (var i=0;i< document.styleSheets.length;i++) { 
            var rules; 
            if (document.styleSheets[i].cssRules) { 
                rules = document.styleSheets[i].cssRules; 
            } else { 
                rules = document.styleSheets[i].rules; 
            } 
            for (var j=0;j< rules.length;j++) { 
                if (rules[j].selectorText == sname) { 
                    return rules[j].style; 
                } 
            } 
        } 
    }
    getstyle(".pd").display//根据类名获取单个css
       getstyle("#id").fontStyle = " italic "//根据id名获取单个css
    getstyle(".pd")//获取所有css
    getstyle(".pd").display = "inline";//设置css

      

      

     
  • 相关阅读:
    Google ObjectiveC Style Guide
    FlvDownloader 2.2发布
    在C#中实现关机
    在.net 2.0/3.0程序中使用扩展方法
    Boost智能指针——scoped_ptr
    二叉查找树
    用C#调用ffmpeg实现媒体类型转换(1)
    FlvDownloader v2.21发布
    发布一款ICO图标和PNG批量转换工具
    在.net中创建外接程序
  • 原文地址:https://www.cnblogs.com/chargeworld/p/12037821.html
Copyright © 2020-2023  润新知