码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript DOM对象控制HTML

时间:2018-09-27 22:16:28      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:fun   string   ica   不包含   utf-8   javascrip   logs   ntb   方法   

首先需要了解什么是 JavaScript DOM对象
以下是一些常用的方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p name="pName">one</p>
    <p name="pName">two</p>
    <p name="pName">three</p>
<hr>
    <a id="aId" title="a标签的属性"></a>
<hr>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
<hr>
    <div id="divId">
        <p id="pId">访问父节点</p>
    </div>
</body>
<script>
    function getName() {
        // getElementsByName() 获取name(全名)
        var pName = document.getElementsByName("pName");
        alert(pName.length) // pName.length为3,pName[1]表示“two”
        // getElementsByTagName() 获取元素
        var pTagName = document.getElementsByTagName("p");
    }

    function getAttr() {
        //getAttribute() 访问元素属性
        var a = document.getElementById("aId");
        var aTitle = a.getAttribute("title");
    }

    function setAttr() {
        //setAttribute() 设置元素属性
        var a = document.getElementById("aId");
        a.setAttribute("title","动态设置a的属性")
    }

    function getChileNode() {
        // childNodes 访问子节点
        var ulElement = document.getElementsByTagName("ul");
        var childNode = ulElement[0].childNodes;// 找到第一个ul元素的子项
        alert(childNode.length);// childNode.length = 5,原因是因为换行都被看为【空白项】。所以上面被看作<ul>【空白】<li>1</li>【空白】<li>2</li>【空白】</ul>。3个【空白项】+2个<li> = 5
    }

    function getParentNode() {
        //parentNode 获取父节点(父节点只有一个)
        var pId = document.getElementById("pId");
        var parentNode = pId.parentNode.nodeName; // 返回 div
    }

    function creatNode() {
        var body = document.body;
        // createElement() 创建元素节点
        var input = document.createElement("input");
        input.type = "button";
        input.value = "按钮";
        // appendChild() 末尾添加元素节点
        body.appendChild(input);
        //#########################################
        var div = document.getElementById("divId");
        var p = document.getElementById("pId");
        var newP = document.createElement("p");
        p.innerText = "新的p元素";
        // insertBefore() 选择性插入节点。
        // 在div中的<p id="pId">元素前插入一个新的p元素(newP)
        div.insertBefore(newP,p);
        // removeChild() 删除节点
        div.removeChild(p);
    }

    function getSize() {
        // offsetHeight 获取网页尺寸(不包含滚动条内)
        var width = document.body.offsetHeight;
        // scrollHeight 获取网页尺寸(包含滚动条内)
        var height = document.body.scrollHeight;
    }
</script>
</html>

Javascript DOM对象控制HTML

标签:fun   string   ica   不包含   utf-8   javascrip   logs   ntb   方法   

原文地址:https://www.cnblogs.com/nnnlillian/p/9715369.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!