JavaScript的DOM对象控制HTML元素

方法名称包括：
getElementsByName() – 获取name
getElementsByTagName() – 获取元素
getAttribute – 获取元素属性
setAttribute – 设置元素属性
childNodes – 访问子节点
parentNode – 访问父节点
creatElement – 创建元素节点
creatTextNode – 创建文本节点
insertBefore – 插入节点
removeChild – 删除节点
offsetHeight – 网页尺寸 (ffsetHeight：内容高度+padding高度+边框宽度)
scrollHeight – 网页尺寸（不包含导航条，实际内容+padding,scrollHeight = topPadding + bottomPadding + 内容margix box的高度。
）
clientHeight – 网页尺寸（不包含导航条，包含padding,计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
offsetHeight）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-JS</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">div的P元素</p>
    </div>

    <script>

        // 添加修改元素属性
        function getName(){
            var count = document.getElementsByName("pn");
//            var count = document.getElementsByTagName("p"); 这一种方式和上面的效果一样,只是一个通过name属性,一个通过本身的name

            // 如果如上方一样一个name同时有多个P标签,那么会以集合的形式排列,此时count.length打印的4;
            // 而如果使用的是getElementByID,则不会出现多个重名的现象;
            alert(count.length);
    /*
            扩展:
            说明：getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
            注释：传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
            比如：var x=document.getElementsByTagName("input");//<input name="myInput" type="text" size="20" />
    */
            var p = count[0];
            p.innerHTML = "world"; // 将第一个元素修改为 "world"; 同理,也可以修改其他元素;
        }
//        getName();
        // 访问元素属性
        function getAttr(){
            var anode = document.getElementById("aid");
            var attr = anode.getAttribute("id");
            alert(attr);
        }
//        getAttr();
        // 设置元素属性
       function setAttr(){
           var anode = document.getElementById("aid2");
           anode.setAttribute("title","动态设置A的title属性");
           var attr = anode.getAttribute("title");
           alert(attr);
       }
//        setAttr();


        // 得到子节点
        function getChildNode(){
            var childNode = document.getElementsByTagName("ul")[0].childNodes;
            alert(childNode.length);
            alert(childNode[0].nodeType); // 获得子节点的类型
        }
//        getChildNode(); // 此时打印的是 7 ,原因:ul标签和li标签之后都默认存在一个空格,如果在<>之后不换行,而是挨着写,就会是3(就像上面的);

        // 得到父节点

        function getParentNode(){
            var div = document.getElementById("pid");
            alert(div.parentNode.nodeName);
        }
//        getParentNode();

        // 创建节点(插入节点)
        function createNode(){
            var body = document.body;
            var input = document.createElement("input"); //        creatTextNode  插入文本节点,
            input.type = "button";
            input.value = "按钮";
            body.appendChild(input); // 往末尾插入节点
        }
//        createNode();

        // 往DIV中添加一个节点,让其显示在P标签的前面
        function addNode(){
            var div = document.getElementById("div");
            var node = document.getElementById("pid");  // 此处是打算把这个节点插入到P标签的前面,因此需要获得P标签的ID;
            var newnode = document.createElement("p");
            newnode.innerHTML = "动态添加第一个P元素";
            div.insertBefore(newnode,node);
        }
//        addNode();


        // 删除节点
        function removeNode(){
            var div = document.getElementById("div");
            var p = div.removeChild(div.childNodes[0]);  // 如果div标签中含有多个子节点,那么需要他们是以数组的形式保存,在删除的时候需要考虑位置;
        }
//        removeNode();

        // 获得网页的尺寸
        function getSize(){
            var width = document.body.offsetWidth;  // 也可以写成document.documentElement.offsetWidth
            var height = document.body.offsetHeight;
            alert(width +","+height);

        }
        getSize();

    </script>



</body>
</html>

JavaScript的DOM对象控制HTML元素

猜你喜欢