JavaScript Dom对象

时间 2019-11-12

原文原文链接

1.Dom简介

dom指的是document。整个doc下还有head,body，而head，body下面又有link p a等css

2.Dom操做HTML

//1.xxxx将会覆盖Hello
<body>
    <p>Hello</p>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            document.write("xxxx");
        }
    </script>

</body>

//2.寻找元素和改内容
<body>
    <p id="pid">Hello</p>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            document.getElementById("pid").innerHTML = @"hah";
        }
    </script>
</body>

//3.更改html属性
<body>
    <a id="aid" href="http://www.baidu.com">baidu</a>
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            document.getElementById("aid").href = "http://www.hao123.com";
        }
    </script>
</body>

3.Dom操做CSS

与操做HTML相似。在script更快css样式
html

4.Dom事件监听

<body>
    <button id="btn">按钮</button>
    <script>
        //句柄操做
        var x = document.getElementById("btn");
        x.addEventListener("click",hello);
        x.addEventListener("click",world);

        function hello(){
            alert("hello");
        }
        function world(){
            alert("world");
        }
    </script>
</body>

5.Dom对象控制HTML

<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标签属性">AAA</a>
<a id="aid2">BBB</a>
<ul>
    <li id="l">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div id="div" style="background-color: aqua">
    <p id="pid">xxxxxx</p>
</div>
<script>
    //获取name
    function getName(){
        var count = document.getElementsByName("pn")
        var p = count[2];
        p.innerHTML = "world"
    }
    getName();

    //获取元素属性
    function getArr(){
        var anode = document.getElementById("aid").getAttribute("id");
        alert(anode)
    }
    //getArr();

    //设置元素属性
    function setAttr(){
        var andoe = document.getElementById("aid2");
        andoe.setAttribute("title","动态设置attr");
        alert(andoe.getAttribute("title"));
    }
    //setAttr();

    //访问子节点
    function getChildNode(){
        var childNode = document.getElementsByTagName("ul")[0].childNodes;
        alert(childNode.length);
    }
    //getChildNode();

    //访问父节点
    function getParentNode(){
        var div = document.getElementById("l");
        alert(div.parentNode.nodeName);
    }
    //getParentNode();

    //建立节点
    function createNode(){
        var body = document.body;
        var input = document.createElement("input");
        input.type = "button";
        input.value = "按钮"
        body.appendChild(input)
    }
    //createNode();

    //插入节点
    function insetNode(){
        var div = document.getElementById("div");
        var oldP = document.getElementById("pid");
        var newnode = document.createElement("p");
        newnode.innerHTML = "insert";
        div.insertBefore(newnode,oldP);
    }
    insetNode();

    //删除节点
    function removeNode(){
        var div = document.getElementById("div");
        div.removeChild(div.childNodes[1]);//1开始算起 不是0
    }
    removeNode();

    //获取页面size
    function getSize(){
        var height = document.documentElement.offsetHeight;
        var width = document.documentElement.offsetWidth;
        alert(height+","+width);
    }
    getSize();
</script>
</body>