<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系统组成和获取命令帮助3

    命令的语法通用格式:        # COMMAND OPTIONS ARGUMENTS        COMMAND:            发起一个命令:请求内核将某个二进制程序运行为一个进程  ...

  2. C++第二次作业--函数

    1.为什么要用函数 创建 C++ 函数时,会定义函数做什么,然后通过调用函数来完成已定义的任务.通过函数我们可以实现代码复用,即可以重复使用和在各种适用情况下使用,函数的存在增强了程序的可读性.并且函 ...

  3. Django REST Framework(DRF)_第四篇

    DRF分页(总共三种) PageNumberPagination(指定第n页,每页显示n条数据) 说明 既然要用人家的那么我们就先来看下源码,这个分页类源码中举例通过参数指定第几页和每页显示的数据:h ...

  4. Web的了解和servlet的初次见面

    web 相信大家都不陌生,平常我们浏览网页用的都是web服务.互联网起初的web就是非常简单的页面,但是随着客户需求越来越复杂,需要的功能越来越多,我们的服务器端需要处理的请求越来越多,需要区分不同的 ...

  5. 一次完整的HTTP请求所经历的7个步骤【转】

    HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1. 建立TCP连接 在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该 ...

  6. kettle案例实现

    案例一.把stu1的数据按id同步到stu2,stu2有相同id则更新数据 在kettle中新建转换 点击左上角文件—新建—转换到核心对象界面,点击输入,找到表输入拖拽到中间 双击表输入,在数据库连接 ...

  7. robotframework FOR循环

    #获取到的ID组装成一个list ${List_ID} Create List ${ID_1} ${ID_2} ${ID_3} ${ID_4} ${ID_5} ... ${ID_6} ${ID_7} ...

  8. 【转】分布式文件系统FastDFS架构剖析

    FastDFS是一款类Google FS的开源分布式文件系统,它用纯C语言实现,支持Linux.FreeBSD.AIX等UNIX系统.它只能通过专有API对文件进行存取访问,不支持POSIX接口方式, ...

  9. CCPC－Wannafly & Comet OJ 夏季欢乐赛（2019）F

    题面 F比较友善(相较于E),我们发现如果i和j是满足条件的两个下标,那么: a[i]-2*b[i] + a[j]-2*b[j] >=0 或者 b[i]-2*a[i] + b[j]-2*a[j] ...

  10. Uva 10129 Play on Words(欧拉路)

    一些秘密的门包含一个非常有趣的单词拼图.考古学家们必须解决的问题 它打开那门.因为没有其他的方式来打开大门,这个谜是非常重要的 我们. 每扇门上都有大量的磁性板.每一个盘子上都有一个字 它.板块必须以 ...