javascript之DOM简介

DOM文档对象模型

DOM文档对象模型是基于HTML树的api,这里可以把HTML结构看成是一颗树形结构,使用DOM可以操作树中的节点,即操作(增删改查)HTML标签。
DOM树形结构

上图是一个简单的DOM树形结构图,可以使用document对象获取DOM,这个对象是window对象下的,在使用时,可以省略window。
可以把一个HTML标签看做是一个对象,标签中的属性对应的就是对象中的属性,DOM提供了访问他们的方法。

getElementById

getElementById根据html标签的id来获取标签对象:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        姓名:<input type="text"   id="name">
        <br>
        密码:<input type="password"  id="pwd" >
        <br>
        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    var username = document.getElementById("name");
    var pwd = document.getElementById("pwd");

    var btn = document.getElementById("btn");

    btn.onclick = function(){
        alert(username.value);
        alert(pwd.value);
    };
</script>
</html>

getElementsByName

getElementsByName根据html标签的name来获取一个数组对象,在html标签中name值是可以重复的,所以该方法会返回一个数组对象:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByName</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        input:<input type="text" value="value1"  name="monkey">
        <br>
        input:<input type="text" value="value2"  name="monkey">
        <br>
        input:<input type="text" value="value3" name="monkey">
        <br>
        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    var arr = document.getElementsByName("monkey");
    //alert(arr.length);
    /*
    for(index in arr){
        if(!arr.hasOwnProperty(index)){
            continue;
        }

        alert(arr[index].value);
    }
    */
    for(var i=0; i<arr.length; i++){
        alert(arr[i].value);
    }
</script>
</html>

getElementsByTagName

getElementsByTagName根据标签的名字来获取数组对象:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        input:<input type="text" value="value1" name="name">
        <br>
        input:<input type="text"  value="value2" name="name">
        <br>
        input:<input type="text"  value="value3"  name="name">
        <br>

       <select name="hobby" id="hobby">
             <option value="basketball">篮球</option>
          <option value="football">足球</option>
          <option value="volleyball">排球</option>
       </select>
       <br>
       <select name="star" id="star" >
             <option value="cl">成龙</option>
          <option value="llj">李连杰</option>
          <option value="zzd">甄子丹</option>
          <option value="wj">吴京</option>
       </select>

       <br>
       <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    /*
    //获取所有的input元素
    var inputArr = document.getElementsByTagName("input");
    alert(inputArr.length);

    //输出input中type="text"中的 value属性值
    for(var i=0; i<inputArr.length; i++){
        if("text" == inputArr[i].type){
            alert(inputArr[i].value);
        }

    }
    //输出所有option标签中value的值
    var optionArr = document.getElementsByTagName("option");
    for(var i=0; i<optionArr.length; i++){
        alert(optionArr[i].value);
    }
    //输出所有下拉框 id="star"中option标签中 value属性的值
    var star = document.getElementById("star");
    var optionArr = star.getElementsByTagName("option");
    for(var i=0; i<optionArr.length; i++){
        alert(optionArr[i].value);
    }
    */





    //输出下拉框中被选中的value值
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        var optionArr = document.getElementsByTagName("option");
        for(var i=0; i<optionArr.length; i++){
            if(optionArr[i].selected){
                alert(optionArr[i].value);    
            }

        }
    };


</script>
</html>

hasChildNodes

hasChildNodes判断当前html标签对象下是否包含子节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hasChildNodes</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        input:<input type="text" value="value1" name="name" id="id1">
        <br>
        input:<input type="text"  value="value2" name="name">
        <br>
        input:<input type="text"  value="value3"  name="name">
        <br>

       <select name="hobby" id="hobby">
             <option value="basketball">篮球</option>
          <option value="football">足球</option>
          <option value="volleyball">排球</option>
       </select>
       <br>
       <select name="star" id="star" >
             <option value="cl">成龙</option>
          <option value="llj">李连杰</option>
          <option value="zzd">甄子丹</option>
          <option value="wj">吴京</option>
       </select>

       <br>
       <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    //查看id="hobby"的节点是否含有子节点
    var hobby = document.getElementById("hobby");
    alert(hobby.hasChildNodes());

    //查看id="id1"的节点是否含有子节点
    var id1 = document.getElementById("id1");
    alert(id1.hasChildNodes());
</script>
</html>

nodeName、nodeType和nodeValue

在文档中每个节点都有这三个属性:

  • nodeName,获取节点名字
    • 如果节点是元素节点,nodeName返回这个元素的名称
    • 如果是属性节点,nodeName返回这个属性的名称
    • 如果是文本节点,返回一个内容为#text的字符串
  • nodeType,返回一个整数,数值表示节点的类型,常用的有下面三个:
    • 元素节点,返回1
    • 属性节点,返回2
    • 文本节点,返回3
  • nodeValue,获取节点的当前值
    • 元素节点,null
    • 属性节点,当前属性的值
    • 文本节点,返回文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点名称类型和值</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        input:<input type="text" value="value1" id="monkey1" name="monkey">
        <br>
        input:<input type="text" value="value2"  name="monkey">
        <br>
        input:<input type="text" value="value3" name="monkey">
        <br>
        <input type="button" id="btn" name="submit" value="提交" />
    </form>
    <a id="java" href="http://www.monkey1024.com">java教程</a>
</body>
<script type="text/javascript">
    /*
    //元素节点
    var node = document.getElementById("monkey1");
    alert(node.nodeName);
    alert(node.nodeType);
    alert(node.nodeValue);
    //文本节点
    var node = document.getElementById("java");
    var textNode = node.firstChild;//获取第一个子标签
    alert(textNode.nodeName);
    alert(textNode.nodeType);
    alert(textNode.nodeValue);
    */


    //属性节点
    var node = document.getElementById("java");
    var attrNode = node.getAttributeNode("href");//获取第一个子标签
    alert(attrNode.nodeName);
    alert(attrNode.nodeType);
    alert(attrNode.nodeValue);
</script>
</html>

replaceNode

replaceNode替换节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>replaceNode</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        input:<input type="text" value="value1" name="name" id="id1">
        <br>
        input:<input type="text"  value="value2" name="name">
        <br>
        input:<input type="text"  value="value3"  name="name">
        <br>

       <select name="hobby" id="hobby">
             <option value="basketball">篮球</option>
          <option value="football">足球</option>
          <option id="volleyball" value="volleyball">排球</option>
       </select>
       <br>
       <select name="star" id="star" >
             <option value="cl">成龙</option>
          <option value="llj">李连杰</option>
          <option value="zzd">甄子丹</option>
          <option id="wj" value="wj">吴京</option>
       </select>

       <br>
       <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    var hobby = document.getElementById("hobby");
    var star = document.getElementById("star");

    var volleyball = document.getElementById("volleyball");

    var wj = document.getElementById("wj");

    hobby.onclick = function(){
        hobby.replaceChild(wj,volleyball);
    };
</script>
</html>

getAttribute

getAttribute获取标签中的属性,除了使用对象名.属性名的方式来获取属性之外还可以使用getAttribute()方法来获取指定的属性值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getAttribute</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        姓名:<input type="text"  id="name">
        <br>
        密码:<input type="password"  id="pwd" >
        <br>
        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
    var username = document.getElementById("name");
    var nameType = username.getAttribute("type");
    alert(nameType);
</script>
</html>

setAttribute

setAttribute给对象添加属性,如下代码,3秒后给div添加style属性将字体设置为红色:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setAttribute</title>
</head>
<body>
    <div id="d1">好好学习javascript</div>
</body>
<script type="text/javascript">
    var d1 = document.getElementById("d1");
    setTimeout(function(){
        d1.setAttribute("style","color:red");
    },3000);
</script>
</html>

createElement

createElement可以创建一个标签,createTextNode向标签中添加文本,如下代码,向下拉框中添加一个选项:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>createElement</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        <select name="hobby" id="hobby">
             <option value="basketball">篮球</option>
          <option value="football">足球</option>
          <option value="volleyball">排球</option>
       </select>
    </form>
</body>
<script type="text/javascript">
    /*在下拉框中增加一个跑步的选项*/
    //创建option标签
    var optionNew = document.createElement("option");
    //添加属性
    optionNew.setAttribute("value","run");

    //添加文本
    var txt = document.createTextNode("跑步");
    optionNew.appendChild(txt);

    //将标签加入到select中
    var hobby = document.getElementById("hobby");
    hobby.appendChild(optionNew);
</script>
</html>

insertBefore

insertBefore在指定位置之前插入标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>insertBefore</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        <select name="hobby" id="hobby">
             <option value="basketball">篮球</option>
          <option id="football" value="football">足球</option>
          <option value="volleyball">排球</option>
       </select>
    </form>
</body>
<script type="text/javascript">
    var optionNew = document.createElement("option");
    //添加属性
    optionNew.setAttribute("value","run");

    //添加文本
    var txt = document.createTextNode("跑步");
    optionNew.appendChild(txt);

    //将标签加入到select中
    var hobby = document.getElementById("hobby");

    var football = document.getElementById("football");
    hobby.insertBefore(optionNew,football);
    //hobby.insertBefore(optionNew,hobby.options[2]);
</script>
</html>

removeChild

removeChild删除指定元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>removeChild</title>
</head>
<body>
    <form name="baseInfo" action="#" method="post">
        <select name="hobby" id="hobby">
             <option value="basketball">篮球</option>
          <option id="football" value="football">足球</option>
          <option id="volleyball" value="volleyball">排球</option>
       </select>
    </form>
</body>
<script type="text/javascript">
    var hobby = document.getElementById("hobby");
    var volleyball = document.getElementById("volleyball");
    hobby.removeChild(volleyball);
</script>
</html>

innerHTML

大部分浏览器中都支持innerHTML,但是他不是DOM标准的组成部分。可以使用innerHTML获取对象的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML</title>
</head>
<body>
    <table>
    <tr id="tr1">
        <td id="td1">数学</td>
        <td id="td2">语文</td>
    </tr>
    </table>
    <div id="d1">好好学习java</div>
</body>
<script type="text/javascript">

    var t = document.getElementById("tr1");
    alert(t.innerHTML);

    setTimeout(function() {
        var d1 = document.getElementById("d1");
        d1.innerHTML = "我想打篮球";
    }, 3000);
</script>
</html>