javascript之DOM(Document Object Model) 文档对象模型

时间：2021-12-04 15:59:54
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

</head>

<body>

    <a href="#">标题1</a>

    <a href="#">标题2</a>

    <a href="#">标题3</a>

    <input type="button" onClick="writeUrl()" value="设置a标的地址"/>

</body>

<script type="text/javascript">

/*

  DOM(Document Object Model) 文档对象模型

    一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的

    对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到

    对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。      

    var allNodes = document.all;   //获取html文件中的所有标签节点 。

    for(var i = 0; i<allNodes.length ; i++){

        alert(allNodes[i].nodeName);     //标签的名字  nodeName;

    }

*/

    function writeUrl(){

        var links = document.links; // 获取文档中含有href的属性的标签。

        for(var i = 0; i<links.length ; i++){

            links[i].href = "http://www.baidu.com";

        }

    }

</script>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

/*

    通过html元素的标签属性找节点。

        document.getElementById("html元素的id")

        document.getElementsByTagName("标签名")

        document.getElementsByName("html元素的name")

*/

    function showText(){

        var inputNode = document.getElementById("userName");  //根据ID属性值找元素

        inputNode.value = "设置好了文本";

    }

    //InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.

    function showImage(){

        var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。

        for(var i = 0 ; i<images.length ; i++){

            images[i].src = "/user.png";

            images[i].width="100";

            images[i].height="100";

        }

    }

     function showDiv(){

        var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组。

        for(var i = 0 ; i<divs.length ; i++){

            divs[i].innerHTML = "哈哈".fontcolor("red");

        }

    }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>

    <hr/>

    <img src="" />

    <img src="" />

    <img src="" />

    <input type="button" onclick="showImage()" value="显示图片"/>

   <hr/>

    <div name="info"></div>

    <div name="info"></div>

    <div name="info"></div>

     <input type="button" onclick="showDiv()" value="设置div内容"/>

</body>

</html>

根据属性找标签demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

    function checkAll(allNode){

        //找到所有的的选项

        var items = document.getElementsByName("item");

        //找到全选按钮的对象

        //var allNode = document.getElementsByName("all")[0];

        for(var i = 0 ; i<items.length ; i++){

            items[i].checked =     allNode.checked;

        }

    }

    function getSum(){

        var items = document.getElementsByName("item");

        var sum = 0;

        for(var i = 0 ; i<items.length ; i++){

            if(items[i].checked){

                sum += parseInt(items[i].value);

            }

        }

        var spanNode = document.getElementById("sumid");

        spanNode.innerHTML = ("&nbsp;&nbsp;&nbsp;&yen;"+sum).fontcolor("green");

    }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <div>商品列表</div>

        <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />

        <input type="checkbox" name="item" value="1800"  />笔记本电脑1800元<br />

        <input type="checkbox" name="item" value="300"  />笔记本电脑300元<br />

        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />

        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />

        <input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />

        <input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br />

        <input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>

</body>

</html>

创建字节入插入节点、设置节点的属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

/*

 创建字节入插入节点、设置节点的属性。

    document.createElement("标签名")        创建新元素节点

    elt.setAttribute("属性名", "属性值")    设置属性

    elt.appendChild(e)                        添加元素到elt中最后的位置

*/

    var num  = 1;

    function add(){

        var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。

        //setAttribute:设置节点的属性

        inputNode.setAttribute("type","button");

        inputNode.setAttribute("value","按钮"+num);

        num++;

        var bodyNode = document.getElementsByTagName("body")[0];

        bodyNode.appendChild(inputNode); //appendChild 添加子节点。

    }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <input type="button" onclick="add()" value="添加"/>

</body>

</html>

添加附件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

/*

插入目标元素的位置

    elt.insertBefore(newNode, oldNode);            添加到elt中，child之前。

    注意： elt必须是oldNode的直接父节点。

    elt.removeChild(child)                    删除指定的子节点

    注意： elt必须是child的直接父节点。

*/    

    function addFile(){

        //先要创建一个tr对象

        var trNode = document.createElement("tr");

         //创建td对象

        var tdNode1 =  document.createElement("td");

        var tdNode2 =  document.createElement("td");

        //

        tdNode1.innerHTML ="<input type='file'/>";

        tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";

        //把td的节点添加到tr节点上

        trNode.appendChild(tdNode1);

        trNode.appendChild(tdNode2);

        var tbodyNode = document.getElementsByTagName("tbody")[0];

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

        tbodyNode.insertBefore(trNode,lastRow);

    }

    //删除附件

    function delFile(aNode){

        var trNode = aNode.parentNode.parentNode;

        var tbodyNode = document.getElementsByTagName("tbody")[0];

        tbodyNode.removeChild(trNode);

    }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <table>

        <tr>

            <td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td>

        </tr>

        <tr id="lastRow">

            <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td>

        </tr>

    </table>

</body>

</html>

城市的联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript"> 

    function showCity(){

        //维护一个二维数组存储省份对应的城市

        var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];            

        //获取省份对应的节点

        var provinceNode = document.getElementById("province");

        //获取省份选中的选项

        var selectIndex =  provinceNode.selectedIndex;

        //获取对应的城市

        var  cityDatas = citys[selectIndex];

        //找到city节点

        var cityNode = document.getElementById("city");

        /*

        //先清空city框所有option

        var children = cityNode.childNodes;

        for(var i = 0; i<children.length ; ){

            cityNode.removeChild(children[i]);

        }

        */

        //设置options的个数。

        cityNode.options.length = 1 ;

        //遍历对应的所有城市然后创建对应的option添加到city上。

        for(var index = 0; index<cityDatas.length ; index++){

            var option = document.createElement("option");

            option.innerHTML = cityDatas[index];

            cityNode.appendChild(option);

        }

    }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    省份<select id="province" onchange="showCity()">

            <option>省份</option>

            <option>广东</option>

            <option>湖南</option>

            <option>广西</option>

        </select>

    城市<select id="city"><option>城市</option></select>

</body>

</html>

相关文章