【DOM】1.概述

来源：互联网发布：ecshop2.7.3源码下载编辑：程序博客网时间：2024/06/05 05:13

【注意：可以在浏览器打开网页程序按F12调试程序】

一、概述

DOM：Document Object Model 文档对象模型
作用：将标记型文档（html,xml）以及文档中的标签等所有内容封装成对象。
浏览器内置了DOM技术的解析器，直接对标记型文档解析成对象，驻留在内存中，并按照标签的层次关系生成一个DOM树。
正因为DOM将文档和内容解析成了对象，才有了动态操作的可能。

二、DHTML

DHTML：多项技术综合体的简称，动态的HTML
包括：HTML/CSS/DOM/JS
- HTML：提供标签，用于封装数据。给数据加标签，它是最基础的部分。
- CSS：提供样式，用于对标签中的数据进行丰富的效果展现。
- DOM：提供解析，将标记型文档以及文档中内容都封装成了对象，在对象中定义更多的属性和行为。
- JS：提供逻辑性较强的程序设计内容，可以对对象的动作进行控制，负责的是页面的动态的行为。

三、BOM

BOM：Browser Object Model 浏览器对象模型
将浏览器以及浏览器中的一些内容封装成对象
包括：
- Window(代表浏览器打开的一个窗口对象)
  - history
  - location
  - document
  - navigator
演示Window

<body>      <script type="text/javascript">        function locationDemo() {            //alert(location.href);//获取当前地址字符串            location.href = "http://www.baidu.com";//也可以设置地址        }    </script>    <!-- onclick添加监听机制 -->    <input type="button" value="演示地址栏" onclick="locationDemo()"></body>

窗口移动演示
【这个效果我没有显示出来，如果有小伙伴弄出来，可以评论告诉我一下嘛]】

<body>  <script type="text/javascript">    function moveDemo() {        for(var i=0; i<500; i++) {            moveBy(20,0);//右移20            moveBy(0,20);//上移20            moveBy(-20,0);//左移20            moveBy(0,-20);//下移20        }    }</script><input type="button" value="演示窗口移动" onclick="moveDemo()" /></body>

document演示：通过window对象获取窗体中的document对象
获取窗体中的document对象原因：因为标签都在文档中，想要获取标签就要先有document对象。
getElementById(“id”);通过id属性，获取标签对象，若id不唯一，拿到的是程序中第一个是该id的标签。

<body>      <script type="text/javascript">        function documentDemo() {            var divNode = document.getElementById("divid");//通过id属性，获取标签对象            //alert(divNode.nodeName);//返回节点名称,DIV            //alert(divNode.innerHTML);//获取div中的文本,DIV区域            divNode.innerHTML = "新文本".fontcolor("red");//设置新的div中的文本        }    </script>    <input type="button" value="演示DIV" onclick="documentDemo()"/>    <div id="divid">DIV区域</div></body>

这里写图片描述

getElementsByName(“name”);根据name标签属性，返回对象的集合（数组），因为name值可以重复（例如，性别单选框，分组）
凡是写着getElement**s**，返回的都是数组

<body>  <script type="text/javascript">    function documentDemo() {        var textNodes = document.getElementsByName("users");//返回的是数组        alert(textNodes.length);        //alert(textNodes[0].type);拿到文本框的类型        //alert(textNodes[0].value);拿到文本框输入的值        //textNodes[0].value = "123";给文本框赋值        //对于textNodes[0]可以这样写        /*        var textNode_0 = document.getElementsByName("users")[0];        textNode_0.value = "123";        */    }</script>    <input type="button" value="演示document" onclick="documentDemo()"/>    <input type="text" name="users"/>    <input type="text" name="users"/></body>

getElementsByTagName(“标签名”);//通过标签名获取对象，返回集合

<body>      <script type="text/javascript">        function documentDemo() {            /*var nodes = document.getElementsByTagName("div");//返回了页面中所有的div标签区域对象            for(var i=0; i<nodes.length; i++) {                alert(nodes[i].innerHTML);            }*/            //获取表格中的div(获取局部的某指定标签)            var tableNodes = document.getElementById("tableID");            var divNodes = tableNodes.getElementsByTagName("div");            for(var i=0; i<divNodes.length; i++) {                alert(divNodes[i].innerHTML);            }        }    </script>    <input type="button" value="演示document" onclick="documentDemo()"/>    <div>DIV区域1</div>    <table id="tableID">        <tr>            <td>单元1</td>            <td><div>DIV区域2</div></td>        </tr>        <tr>            <td>单元3</td>            <td><div>DIV区域3</div></td>        </tr>    </table></body>

按照节点层次关系获取节点
父节点：唯一性
子节点：不唯一，数组
兄弟节点：不同浏览器对兄弟节点解析不同（很少用）

<body>      <script type="text/javascript">        function documentDemo() {            var tableNodes = document.getElementById("tableID");            /*            //获取表格节点的父节点(body)            var node = tableNodes.parentNode;            alert(node.nodeName);//BODY            */            /*            var node_2 = tableNodes.childNodes;            alert(node_2.length);//2             //第一个子节点为#text            //不同的浏览器处理方法不同，有的浏览器运行结果长度为1，即只有TBODY            //第一个子节点为#text是因为把程序布局上的空白符算进去了，非IE都是#text，低版本IE不是#text)            //第二个子节点是TBODY            */            //获取表格节点的子节点(tr)            var node_3 = tableNodes.childNodes[1].childNodes;            alert(node_3.length);//4            for(var i=0; i<node_3.length; i++) {                alert(node_3[i].nodeName);//TR #text TR #text 理由同上            }            //获取兄弟节点开发时不要使用，有可能会获取到空文本节点#text        }    </script>    <input type="button" value="演示document" onclick="documentDemo()"/>    <table id="tableID">        <tr>            <td>单元1</td>            <td><div>DIV区域2</div></td>        </tr>        <tr>            <td>单元3</td>            <td><div>DIV区域3</div></td>        </tr>    </table></body>

0 0