Day14-DOM

最新推荐文章于 2024-07-06 16:47:02 发布

柳子陌

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量117

点赞数

分类专栏：前端文章标签： javascript js css 前端

本文链接：https://blog.csdn.net/qq_38205875/article/details/109069641

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

title: Day14-DOM
date: 2020-07-22 20:58:13
tags:

DOM

DOM：Document Object Model（文档对象模型）

用来将标记型文档封装成对象，并将标记型文档中的所有的内容（标签，文本，属性等）都封装成对象。封装成对象的目的是为了更方便操作这些文档中的所有内容，因为对象的出现可以有属性和行为被调用

文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用
模型：所有标记型文档都具备一些共性特征的一个体现

只要是标记型文档，DOM这种技术都可以对其进行操作，常见的标记型文档：（HTML、XML）要操作标记型文档必须对其进行解析

DOM技术的解析方式：dom解析将按照标签的层次关系体现出标签的所属，形成一个树状结构，称为DOM树，树中的标签以及文本甚至属性称为节点，这个节点也成为对象，标签通常也称为页面中的元素。

好处：可以对树中的节点进行任意操作，比如：增删改查
弊端：这种解析需要将整个标记型文档加载进内存

DOM解析文档

简介另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准

SAX解析方式：基于事件驱动的解析

好处：获取速度非常快
弊端：无法进行增删改

如果仅仅只是查询，可以使用SAX

DOM的三层模型

DOM level 1：将html文档封装成对象
DOM level 2：在level 1基础上加入了新功能，比如解析名称空间（可以使用域名来标识）

<html xmlns = "my"> <table></table> </html> <html xmlns = "you"> <table></table> </html>
DOM level 3：将xml文档封装成对象

DHTML

动态的html，不是一门语言：是多项技术综合体的简称（HTML，CSS，JavaScript，DOM）

HTML：负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作

简述：用标签封装数据
CSS：负责提供样式属性，对标签中的数据进行样式的定义

简述：对数据进行样式定义
DOM：负责将标签型文档以及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作

简述：将文档和标签及其他内容变成对象
JavaScript：负责提供程序设计语言，对页面中的对象进行逻辑操作

简述：页面的行为定义，页面的动态效果，是动态效果的主力编程语言

DHTML + XMLhttpRequest = AJAX

BOM模型

BOM：Browser Object Model（浏览器对象模型）这个模型方便操作浏览器

浏览器对应的对象就是window对象，可以通过查阅DHTML api获得

<input type = "button" value = "演示window对象" onclick = "windowDemo()" />
<script type = "text/javascript">
    function windowDemo(){
        // 获取浏览器信息navigator
        var name = window.navigator.appName;
        var version = navigator.appVersion;		// window可以省略
        document.write(name + ":" + version);
    }
    
    function windowDemo1(){
        // 演示地址栏 location
        var pro = location.protocol;	// file
        var text = location.href;		// file:///E:/demo.html
        // 给location的href属性设置一个值。改变了地址栏的值，并对其进行了解析，如果是http，还进行连接访问
        location.href = "http://www.baidu.com";
        document.write(pro);
    }
    
    function windowDemo2(){
        // 确认点击弹窗
        var b = confirm("are you sure onClick!");
        alert(b);
        // 设置闹钟
        var id = setTimeout("alert('time run')", 4000);				// 4s后执行
        var id1 = setInterval("alert('Interval run')", 3000);	 	 // 每3s执行一次
        clearInterval(id1);
        clearTimeout(id);
    }
    
    function windowMove(){
        moveBy(10,10);	// 每次点击，窗口移动x = 10, y = 10
        moveTo(40,50);	// 移动到指定位置
    }
    
    function windowOnunload(){
        onunload = function(){	// 3
            alert("unload run");
        }
        onload = function(){	// 1
            alert("load run");
            window.status = "a load is finish"
        }
        onbeforeunload = function(){	// 2
            alert("before unload run");
        }
    }
</script>

练习：广告弹窗

<html>
    <head>
        <meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
        <title>test</title>
    </head>
    <body>
        <script type = "text/javascript">
            /**
             *	弹窗广告效果，页面一加载完就执行
             */
            onload = function(){
                open("./AD.html", "_blank","height = 300, width = 400, status = no, toolbar = no, location = no");
            }
            // 一分钟获取一次焦点
            setInterval("focus()", 1000);
        </script>
    </body>
</html>

Document对象

该对象将标记型文档进行封装，该对象的作用，是对可以标记型文档进行操作

最常见的操作：想要实现动态效果，需要对节点操作，那么要先获取到这个节点。要想获取节点，就必须先要获取到节点所属的文档对象document

获取节点的方法体现

getElementById()：通过标签的id属性值，获取该标签节点。返回该标签节点
getElementsByName()：通过标签的name属性，获取该节点。因为name有相同，返回该节点数组
getElementsByTagName()：通过标签名，获取该标签节点。因为标签名会重复，返回该标签数组
凡是带s返回的都是数组

常见节点有三种：
1. 标签节点：类型 1
2. 属性节点：类型 2
3. 文本节点：类型 3
标签型节点是没有值的，属性和文本节点是可以有值的

<html>
    <head>
        <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
        <title>document</title>
    </head>
    <body>
        <div id = "hh">11111111111111111</div>		<!-- getElementById -->
        <input type = "texy" name = "user"  />		<!-- getElementsByName -->
        <a href = "http://www.baidu.com">百度</a>	   <!-- getElementsByTagName -->
        <a href = "http://www.baidu.com">百度1</a>
        <a href = "http://www.baidu.com">百度2</a>
        <div id = "news">
            <a href = "http://www.baidu.com">百度</a>
            <a href = "http://www.baidu.com">百度1</a>
            <a href = "http://www.baidu.com">百度2</a>
        </div>
        
        <input type = "button" value = "演示document获取节点" onclick = "getNodeDemo()" />
        
        <script type = "text/javascript">
           function getNodeDemo(){
               var hhNode = document.getElementById("hh");
               console.log(hhNode.nodeName + hhNode.nodeType + hhNode.nodeValue);
               // 获取div中的文本
               var text = hhNode.innerHTML;		// 11111111111111111
               // 修改div中的文本
               hhNode.innerHTML = "hhhhhhhhhhhhhhh".fontcolor("red");
               ---------------------------------------------------------------------------
               var nodes = document.getElementsByName("user");
               console.log(nodes[0].type + nodes[0].value);	// text  文本框写啥拿啥
               var userNode = document.getElementsByName("user")[0];	// 须保证name = user 只有唯一一个
               ---------------------------------------------------------------------------
               var aNode = document.getElementsByTagName("a");
               console.log(aNode[0].innerHTML);
               // 给所有超链接设置新窗口打开
               for(var i = 0; i < aNode.length; i++){
                   aNode[i].target = "_blank";
               }
               // 给部分超链接设置打开新窗口
               var newNode = document.getElementById("news");
               var newArrNode = newNode.getElementsByTagName("a");
               for(var i = 0; i < newArrNode.length; i++){
                   newArrNode[i].target = "_blank";
               }
           }
        </script>
    </body>
</html>

通过节点的层次关系获取节点

父节点：parentNode对应一个节点对象
子节点：childNodes对应一个节点集合，只包含下一层子节点，没有孙子节点
兄弟节点：尽量少用兄弟节点，因为在解析时会出现浏览器不同解析不一致，会出现解析出标签间的空白文本节点
- 上一个兄弟节点：previousSibling
- 下一个兄弟节点：nextSibling

<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <input type = "botton" value = "click" />
        <div>div区域</div>
        <table id = "table">
            <tr>
                <td>d1</td>
                <td>d2</td>
            </tr>
        </table>
        <dl>
            <dt>up</dt>
            <dt>down</dt>
        </dl>
        <script type = "text/javascript">
            function getNodeByLevel(){
                // 获取页面中的表格节点
                var tableNode = document.getElementById("table");
                // 获取父节点
                var pNode = tableNode.parentNode;		// body节点
                // 获取子节点
                var cNode = tableNode.childNodes;		// tbody
                // 获取孙子
                var cNode = cNode[0].childNodes[0].nodeName;	// tr
            }
        </script>
    </body>
</html>

节点操作

创建并添加
删除
修改

<div id = "1">    </div>
<div id = "2">22222222</div>
<div id = "3">33333333</div>
<div id = "4">44444444</div>

<input type="botton" value = "创建并添加节点" onclick = "creatAndAdd()" />
<input type="botton" value = "删除节点 " onclick = "del()" />
<input type="botton" value = "修改节点" onclick = "update()" />

<script type = "text/javascript">
    // 增
    function creatAndAdd(){
        // 1.创建文本节点/按钮节点
        var text = document.createTextNode("这是一个新节点")
        var botton = document.createElement("input");
        botton.type = "botton";
        botton.value = "click";
        // 2.获取1节点
        var div1Node = document.getElementById("1");
        // 3.添加到1节点中
        div1Node.appendChild(text);
        div1Node.appendChild(botton);
    }
    function creatAndAdd1(){
    	var div1Node = document.getElementById("1");
        div1Node.innerHTML = "hahahahaha";
        div1Node.innerHTML = "<input type = 'botton' value = 'newClick' />";
    }
    // 删
    function del(){
        // 获取2节点
        var div2Node = document.getElementById("2");
        // 删除2节点
        div2Node.removeNode(false);	// true：递归删除节点下所有内容  该方法较少使用
        // 一般使用removeChild方法
        div2Node.parentNode.removeChild(div2Node);
    }
    // 改
    function update(){
        // 获取1，3节点
        var div1Node = document.getElementById("1");
        var div3Node = document.getElementById("3");
        // 用3替换1节点
        // div1Node.replaceNode(div3Node);		// 该操作会把原来的3搬到1位置上，3位置消失
        div1Node.parentNode.replaceChild(div3Node,div1Node);
        
        // 3不动，复制一份到1上
        var div3Copy = div3Node.cloneNode(true);	// true:递归克隆节点下所有内容  该方法较少使用
        div1Node.parentNode.replaceChild(div3Copy,div1Node);
    }
</script>

核心DOM模型

Document：文档对象
1. 创建（获取）：在HTML DOM模型中可以使用window对象来获取
  1. window.document
  2. document
2. 方法：
  1. 获取Element对象：
    - getElementById()：查找具有指定的唯一id的元素，id属性一般唯一
    - getElementsByTagName()：根据元素名称获取元素对象集合，返回数组
    - getElementsByClassName()：根据Class属性值获取元素对象集合，返回数组
    - getElementsByName()：根据name属性值获取元素对象集合，返回数组
  2. 创建其他DOM对象：
3. 属性
Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
  - removeAttribute()：删除属性
  - setAttribute（）
Node：节点对象，其他5个的父对象

柳子陌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day14-DOM

title: Day14-DOMdate: 2020-07-22 20:58:13tags:DOMDOM：Document Object Model（文档对象模型）用来将标记型文档封装成对象，并将标记型文档中的所有的内容（标签，文本，属性等）都封装成对象。封装成对象的目的是为了更方便操作这些文档中的所有内容，因为对象的出现可以有属性和行为被调用文档：标记型文档对象：封装了属性和行为的实例，可以直接被调用模型：所有标记型文档都具备一些共性特征的一个体现只要是标记型文档，DOM这种技术.
复制链接

扫一扫