DOM-------1 -优快云博客

本文详细介绍了DOM操作的基础知识，包括如何通过getElementById, getElementsByTagName及getElementsByName等方法选取元素节点，以及如何操作属性节点和文本节点等内容。

节点类型：元素节点/属性节点/文本节点

元素节点

getElementById(id);
PS:DOM操作必须等待HTML文档加载完毕才可以获取
<1> 把脚本移文档最后
<2> 用onload事件加载

// 当网页所有内容都加载完再执行
        window.onload = function(){
        var data = document.getElementById("lalala");
        alert(data);
        };

属性节点

tagName 标签名
innerHTML 元素节点里的内容（文本）
id ID值(属性值，不是属性节点)
title title值
style 获取style属性对象
className 获取class属性值

属性中的值可以更改

<script>
    window.onload = function(){
    var data = document.getElementById("lalala");
    alert("id:"+data.id);               // id:lalala
    alert("class:"+data.className);     // class:head
    alert("title:"+data.title);         // title:标题
    alert("style:"+data.style);         // style:[object CSSStyleDeclaration]
    alert("innerHTML:"+data.innerHTML); // innerHTML:啦啦啦
    };
</script>
    <div id="lalala" class="head" title="标题">啦啦啦</div>

getElementsByTagName(“标签名”)

根据标签名返回符合条件的数组

data[0].HTML与data.item(0).innerHTML等效

    <script>
        window.onload = function(){
            var data = document.getElementsByTagName("li");
            alert(data[0].innerHTML);       // 1
            alert(data.item(0).innerHTML);  // 1
        };

    </script>
    <div id="lalala" class="head" title="标题">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>

        </ul>

    </div>

getElementsByName(“name”);

根据name属性返回符合条件的数组

    <script>
        window.onload = function(){
            var data = document.getElementsByName("input");
            alert(data[1].size);    // 20
        };
    </script>
    <body>
        <form>
            <input type="text" name="input" size="10"/>
            <input type="text" name="input" size="20"/>
        </form>
    </body>

PS:div标签中没有name属性，ie无法获取

属性值的操作

1，getAttribute(“属性名”); 返回属性的值(对象/值)
2，setAttribute(“属性名”,”属性值”);
3，removeAttribute(“属性名”) 移除属性

        window.onload = function(){
            var data = document.getElementById("lalala");
            data.setAttribute("style","background-color:skyblue;");
        }

    </script>
    <div id="lalala" class="head" title="标题">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>

        </ul>
    </div>