获取元素节点 & 操作属性节点

1.html 文档编写 js 代码的位置：

window.onload事件在整个html文档被完全加载完再执行，
所以可以获取html文档的任何节点

js-window-onload.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //window.onload事件在整个html文档被完全加载完再执行
    //所以可以获取html文档的任何节点
    window.onload = function() {

    };
</script>
</head>
<body>
    <button>Click</button>
</body>
</html>

2.获取元素节点方式

①. document.getElementById:

根据 id 属性获取对应的单个节点

②. document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

③. document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,
但 ie 的实现方式和 W3C 标准有差别:
在 html 文档中若某节点(li)没有 name 属性,　
则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

dom-getNode.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript">
    //获取指定的元素节点. 
    window.onload = function() {
        //1.获取id为bj的节点，编写文档时确保 id属性值是唯一的，该方法为document对象的方法
        var bjNode = document.getElementById("bj");
        alert(bjNode);

        //2.获取所有li节点，使用 标签名 获取节点的集合，该方法为Node接口的方法， 任何一个节点都有这个方法
        var liNodes = document.getElementsByTagName("li");
        alert(liNodes.length);

        var cityNode = document.getElementById("city");
        var cityLiNode = cityNode.getElementsByTagName("li");
        alert(cityLiNode.length);

        // 3.根据html文档元素的name属性名来获取指定的节点的集合
        var genderNodes = document.getElementsByName("gender");
        alert(genderNodes.length)

        //若html元素自身没有定义name属性，则getElementsByName(),此方法对于IE无效，所以使用该谨慎
        var bjNode2 = document.getElementsByName("BeiJing");
        alert(bjNode2.length)
    }
</script>

</head>
<body>
    <p>你喜欢哪个城市?</p>
    <ul id="city">
        <li id="bj" name="BeiJing">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
    </ul>

    <br>
    <br>
    <p>你喜欢哪款单机游戏?</p>
    <ul id="game">
        <li id="rl">红警</li>
        <li>实况</li>
        <li>极品飞车</li>
        <li>魔兽</li>
    </ul>

    <br>
    <br> gender:
    <input type="radio" name="gender" value="male" />Male
    <input type="radio" name="gender" value="female" />Female
</body>
</html>

3. 获取属性节点:
①可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值

②通过元素节点的 getAttributeNode 方法来获取属性节点,
然后在通过 nodeValue 来读写属性值

dom-getNode2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript">
    //读写属性节点
    window.onload = function() {
        // 属性节点即为某一指定元素节点的属性
        //1.先获取指定那个元素的节点
        var nameNode = document.getElementById("name");

        //2.读取指定属性的值
        alert(nameNode.value);

        //3.设置指定属性的值
        nameNode.value = "李静"

    }
</script>

</head>
<body>
    <p>你喜欢哪个城市?</p>
    <ul id="city">
        <li id="bj" name="BeiJing">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
    </ul>

    <br>
    <br>
    <p>你喜欢哪款单机游戏?</p>
    <ul id="game">
        <li id="rl">红警</li>
        <li>实况</li>
        <li>极品飞车</li>
        <li>魔兽</li>
    </ul>

    <br>
    <br> name：
    <input type="text" name="username" id="name" value="xiaoxiaolin">
</body>
</html>

获取元素节点 & 操作属性节点

猜你喜欢