zoukankan      html  css  js  c++  java
  • JS DOM对象控制HTML元素详解

    常用方法:

      getElementsByName()- 根据name获取元素

      getElementsByTagName() -获取元素

      getAttribute() -获取元素属性

      setAttribute() -设置元素属性

      childNodes() -访问子节点

      parentNode() -访问父节点

      createElement() -创建元素节点

      createTextNode() -创建文本节点

      insertBefore() -插入节点

      removeChild() -删除节点

      offsetHeight -网页尺寸

      scrollHeight -网页尺寸

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
    </head>
    <body>
        <p name="pn">hello</p>
        <p name="pn">hello</p>
        <p name="pn">hello</p>
        <p name="pn">hello</p>
        <a id="aid" title="得到了a标签的属性">hello</a>
        <a id="aid2">aid2</a>
        <ul><li>1</li><li>2</li><li>3</li></ul>
        <div id="div">
            <p id="pid">pid</p>
        </div>
        <script>
            //通过name和标签名获取元素
            function getName(){
                var count = document.getElementsByName("pn");
                var count1=document.getElementsByTagName("p");
                document.write("<hr>");
                document.write("pn的长度是:"+count.length);
                document.write("<br>");
                document.write("p的长度是:"+count1.length);
                var p =count[0];
                var p1 =count[1];
                p.innerHTML ="World";
                p1.innerHTML="World";
            }
            getName();
            //通过id获取元素,并获取元素的属性值
            function getAttr(){
                var anode = document.getElementById("aid");
                var attr=anode.getAttribute("title");
                document.write("<hr>");
                document.write("属性title的值是:"+attr);
            }
            getAttr();
            function setAttr(){
                var anode = document.getElementById("aid2");
                anode.setAttribute("title","动态设置a的title属性");
                var attr =anode.getAttribute("title");
                document.write("<hr>");
                document.write("设置之后的值是:"+attr);
            }
            setAttr();
            function getChildNode(){
                var childnode=document.getElementsByTagName("ul")[0].childNodes;
                document.write("<hr>");
                document.write("childnode.length:"+childnode.length);
            }
            getChildNode();
            //创建元素
            function createNode(){
                var body = document.body;
                var input = document.createElement("input");
                input.type="button";
                input.value="按钮";
                body.appendChild(input);
            }
            createNode();
            //添加节点
            function addNode(){
                var div = document.getElementById("div");
                var node= document.getElementById("pid");
                var newnode1=document.createElement("p");
                var newnode2=document.createElement("hr");
                newnode1.innerHTML = "动态添加第一个p元素";
                div.insertBefore(newnode1,node);
                div.insertBefore(newnode2,node);
            }
            addNode();
            //移除节点
            function removeNode(){
                var div = document.getElementById("div");
                var p=div.removeChild(div.childNodes[1]);
            }
            removeNode();
            //获取文档宽度和长度
            function getSize(){
                var width = document.body.offsetWidth||document.documentElement.offsetWidth;
                var height=document.body.offsetHeight;
                document.write(width+","+height);
            }
            getSize();
        </script>
    </body>
    </html>
    

      

      

  • 相关阅读:
    WCF 第八章 安全 确定替代身份(中)使用AzMan认证
    WCF 第八章 安全 总结
    WCF 第八章 安全 因特网上的安全服务(下) 其他认证模式
    WCF Membership Provider
    WCF 第八章 安全 确定替代身份(下)模仿用户
    WCF 第八章 安全 因特网上的安全服务(上)
    WCF 第九章 诊断
    HTTPS的七个误解(转载)
    WCF 第八章 安全 日志和审计
    基于比较的排序算法集
  • 原文地址:https://www.cnblogs.com/nana135/p/6363339.html
Copyright © 2011-2022 走看看