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

javascript的dom操作

时间:2015-09-11 22:08:26      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:

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

<div id="div1">
        <p id="p1">
            我是第一个苹果</p>
        <p id="p2">
            我是第二个苹果</p>
    </div>
    
    window.onload = function () {
            var str = document.getElementById("p1").innerHTML;
            alert(str);        //弹出    我是第一个苹果
        }

二、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);
        }

 

javascript的dom操作

标签:

原文地址:http://www.cnblogs.com/liuyudong0825/p/4802176.html

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