<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>

javascript之DOM(Document Object Model) 文档对象模型的更多相关文章

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

    [理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...

  2. JS--dom对象：document object model文档对象模型

    dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...

  3. Eloquent JavaScript #11# The Document Object Model

    索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...

  4. DOM(Document Object Model）

    DOM(Document Object Model):    结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容.    结点类型        1.元素结点 对于元素结点的n ...

  5. DOM document object model learn

    DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是 ...

  6. DOM - Document Object Model

    Document Object Model

  7. XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。

    XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...

  8. DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记

    1. childNodes  nodeValue <p id="p1">hello p!</p> alert(document.getElementById ...

  9. BOM—Browser Object Model and DOM—Document Object Model

    浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括do ...

随机推荐

  1. linux命令详解——top

    简介 TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系 ...

  2. odoo标识符

    class Book(models.Model): _name = "library.book" _description = "Book" _order = ...

  3. 第八章·Logstash深入-通过TCP/UDP收集日志

    1.收集TCP/UDP日志 通过logstash的tcp/udp插件收集日志,通常用于在向elasticsearch日志补录丢失的部分日志,可以将丢失的日志通过一个TCP端口直接写入到elastics ...

  4. scroll js 原生

    1.当前位置滚动: document.documentElement.scrollTop 当前位置: 有可能是0 window.scrollTo(,document.documentElement.s ...

  5. LVS (Linux虚拟服务器)-不同的负载均衡方法

    随着Internet用户的增长,基于Web的公司处理的通信量急剧增加.有各种解决方案来应对这种不断增长的流量. 一种解决方案是垂直扩展服务器(即:简单地向服务器添加更多的CPU和内存资源.)当然在一定 ...

  6. zencart分类页每页显示产品数量自定义选择的方法

    zencart默认分类页每页显示产品数量是固定的,如何让顾客可以选择每页显示的产品的数量呢?效果图 方式一:全部展示 方式二:下拉菜单 修改方法 1.导入sql INSERT INTO configu ...

  7. 差分约束详解&&洛谷SCOI2011糖果题解

    差分约束系统: 如果一个系统由n个变量和m个约束条件组成,形成m个形如ai-aj≤k的不等式(i,j∈[1,n],k为常数),则称其为差分约束系统(system of difference const ...

  8. Java之ExceptionHelper工具类

    import java.util.Map; import org.apache.commons.lang3.StringUtils; import org.apache.commons.lang3.e ...

  9. Acwing-197-阶乘分解(质数)

    链接: https://www.acwing.com/problem/content/199/ 题意: 给定整数 N ,试把阶乘 N! 分解质因数,按照算术基本定理的形式输出分解结果中的 pi 和 c ...

  10. python---硬件序列号

    安装wmi : pip install wmi -i https://pypi.douban.com/simple 还要安装  pip install pywin32 import wmi c = w ...