javascript的DOM操作获取元素

一、document.getElementById()    根据Id获取元素节点

<div id="div1">
        <p id="p1">
            我是第一个苹果</p>
        <p id="p2">
            我是第二个苹果</p>
    </div>
    <script>
    window.onload = function () {
            var str = document.getElementById("p1").innerHTML;//获取p1标签里的内容，innerHTML内部
            alert(str);        //弹出    我是第一个苹果
</script>

        }

二、document.getElementsByName()    根据name获取元素节点

<div id="div1">
        <p id="p1">
            我是第一个苹果</p>
        <p id="p2">
            我是第二个苹果</p>
        <input type="text" value="请输入值" name="userName" />
        <input type="button" value="确定" onclick="fun1()">
    </div>
        
        function fun1() {
            var username = document.getElementsByName("userName")[0].value;
            alert(username);    //输出userName里输入的值
        }

三、document.getElementsByTagName()    根据HTML标签名获取元素节点，注意getElements***的选择器返回的是一个NodeList对象，能根据索引号选择其中1个，可以遍历输出。

<div id="div1">
        <p id="p1">
            我是第一个苹果</p>
        <p id="p2">
            我是第二个苹果</p>
    </div>

    window.onload = function () {
            var str = document.getElementsByTagName("p")[1].innerHTML;
            alert(str);        //输出  我是第二个p，因为获取的是索引为1的P，索引从0开始
        }    

    window.onload = function () {
            var arr = document.getElementsByTagName("p");
            for (var i = 0; i < arr.length; i++) {
                alert(arr[i].innerHTML);
            }
        }

    window.onload = function () {
            var node = document.getElementById("div1");
         var node1 = document.getElementsByTagName("p")[1];    //从获取到的元素再获取
            alert(node1.innerHTML);
    }

四、document.getElementsByClassName()    根据class获取元素节点

<div id="div1">
        <p id="p1" class="class1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>

    window.onload = function () {
            var node = document.getElementsByClassName("class1")[0];
            alert(node.innerHTML);
        }