美文网首页
Web基础复习——DOM

Web基础复习——DOM

作者: 哈尼橘橘 | 来源:发表于2019-03-30 20:19 被阅读0次

DOM

Document Object Model，文档对象模型。是HTML和XML文档的编程接口。
DOM将HTML和XML文档作为一个树形结构，而树叶被定义为节点。

HTML DOM

HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

树形结构

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM</title>
</head>
<body>
    <h1 style="color:pink">今天的你也很可爱呢</h1>
    <p>Yeah, I'm pretty!</p>
</body>
</html>
HTML树形结构

整个HTML文档的内容都是节点，HTML文档为文档节点，HTML元素为元素节点，元素内的文本是文本节点，HTML属性是属性节点，连注释也是注释节点。
在这个示例中，元素<head>是元素<html>的首个子节点，元素<body>是元素<html>的最后一个子节点。

对象

方法

在节点（HTML元素）上执行的动作。

getElementById(id)获取带有指定id的节点/元素;
appendChild(node)插入新的子节点/元素;
removeChild(node)删除子节点/元素;
createAttribute(node)创建属性节点;
createElement(node)创建元素节点;
createTextNode(node)创建文本节点;
getAttribute(node)返回指定节点的属性值;
createAttribute(node)修改指定属性的值;

属性

在节点（HTML元素）上设置和修改的值。

innerHTML获取或改变任意节点/元素的文本值;
parentNode节点/元素的父节点;
childNodes节点/元素的子节点;
attributes节点/元素的属性节点;
nodeName规定节点名称;
nodeVaue规定节点的值;
nodeType返回节点的类型，只读；

nodeName
只读；
元素节点的nodeName与标签名相同；
属性节点的nodeName与属性名相同；
文本节点的nodeName始终是#text；
文档节点的nodeName始终是#document；
nodeValue
元素节点的nodeValue是undefine或null;
文本节点的nodeValue是文本本身;
属性节点的nodeValue是属性值；

example：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>对象</title>
</head>
<body>
    <p id="demo1">You are pretty!</p>
    <p id="demo2">FlexibleCat</p>

    <script type="text/javascript">
        var x = document.getElementById('demo1').innerHTML;
        document.write(x);
        document.write('<br>');
        var y = document.getElementById('demo2');
        document.write(y.firstChild.nodeValue); //获取元素的值
    </script>
</body>
</html>
运行结果：

操作元素

创建新的HTML元素

方法：createElement()
过程：

  1. 创建一个新的元素：var para=document.createElement("h1");
  2. 假设要向这个元素添加文本，则要创建文本节点：var node=document.createTextNode("这是一个大标题");
  3. 要把这个新的元素和文本节点连起来，不能让它们孤零零地各自在一边：para.appendChild(node);
  4. 必须要向已有的元素追加这个新的元素，所以先查找已有代码段中存在的元素：var element=document.getElementById("1");
  5. 向已有的元素追加新的元素：element.appendChild(para); 
example：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建HTML元素</title>
</head>
<body id="1">
    <p id="2">这是已有的标签</p>
    <script type="text/javascript">
        var para=document.createElement("h1");
        var node=document.createTextNode("这是一个大标题");
        para.appendChild(node);
        var element=document.getElementById("1");
        element.appendChild(para);
    </script>
</body>
</html>
运行结果：

把创建的新HTML元素插入到某个元素前

方法：insertBefore()

  • 完成创建新的HTML元素的第四步之后，选择想要安排在哪个元素前面： var child=document.getElementById("1");
  • 使用相应方法把新建的HTML元素放在该元素之前：element.insertBefore(para, child); 
example：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建HTML元素并选择位置插入</title>
</head>
<body id="1">
    <p id="2">这是已有的标签</p>
    <script type="text/javascript">
        var para=document.createElement("h1");
        var node=document.createTextNode("这是一个大标题");
        para.appendChild(node);
        var element=document.getElementById("1");
        var child=document.getElementById("2");
        element.insertBefore(para,child);
    </script>
</body>
</html>
运行结果：

删除已有的HTML元素

在删除已有的HTML元素时，必须清楚该元素的父元素。从父元素中删除要删除的子元素。

  1. 找到父元素：var parent=document.getElementById("1");
  2. 找到要删除的子元素：var child=document.getElementById("2");
  3. 删除：parent.removeChild(child);

如果不想费脑子自己去找父元素的话，可以使用parentNode属性来查找。将第三部修改成child.parentNode.removeChild(child);就可以省去第一步找父元素。

example：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>删除已有的HTML元素</title>
</head>
<body id="1">
    <p id="2">这是一个优秀的段落</p>
    <p id="3">这个段落不太优秀</p>
    <p id="4">这个段落既优秀又可爱呢</p>
    
    <script type="text/javascript">
        var parent=document.getElementById("1");
        var child=document.getElementById("3");
        parent.removeChild(child);
        var child1=document.getElementById("2");
        child1.parentNode.removeChild(child1);
    </script>
</body>
</html>
运行结果：

替换HTML元素

与创建新的HTML元素差不多，将最后的方法换成replaceChild()即可。

修改HTML DOM

包括：

  • 改变HTML内容；
  • 改变CSS样式；
  • 改变HTML属性；
  • 创建新的HTML元素；
  • 删除已有的HTML元素；
  • 改变事件/处理程序；

事件的使用与Java中类似，这里不再叨叨。其他形式，下面给出一个简单的示例还不是因为不想写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改HTML元素</title>
</head>
<body id="0">
    <p id="1">今天的天气有点冷</p>
    <p id="2">今天是有点冷呢</p>
    <script type="text/javascript">
        document.getElementById("1").innerHTML="天气被修改啦"; //修改内容
        document.getElementById("2").style.color="pink"; //改变样式
        var son=document.createElement("p");
        var node=document.createTextNode('NEW');
        son.appendChild(node); //创建新的元素
        var element=document.getElementById("0");
        element.appendChild(son);
    </script>
</body>
</html>
运行结果：

XML DOM

与HTML一样，XML的每个成分都是节点。
XML DOM包含了便利XML树，访问、插入及删除节点的方法/函数。
在对XML文档进行操作及访问时，该XML文档必须加载到XML DOM对象中。

XML DOM解析器

大概流程：

  1. 加载XML文档到XML DOM对象中；
  2. 解析器读取XML文档；
  3. 把XML文档转换为XML DOM对象，使JS可以访问它。

补充：
创建XMLHttpRequest对象
语法：xmlhttp=new XMLHttpRequest();
IE5和IE6（旧版本的IE）中，使用ActiveX对象，即：
xmlhttp=new activeXObject("Microsoft.XMLHTTP");
创建DOMParser对象
语法：parser=new DOMParser();`
IE浏览器使用loadXML()方法，即：
xmlDOc

加载XML文档示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加载XML文档</title>
</head>
<body>
    <script type="text/javascript">
        if (window.XMLHttpRequest) {
            xhttp=new XMLHttpRequest();
        }else {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        } //创建XMLHTTP对象

        xhttp.open("open", "demo.xml",false); //打开XMLHTTP对象
        xhttp.send(); //发送XML HTTP请求到服务器
        xmlDoc=xhttp.responseXML; //设置响应为XML DOM对象
        document.write("XML文档已被载入");
    </script>
</body>
</html>
运行结果：

加载XML字符串实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加载字符串</title>
</head>
<body>
    <script type="text/javascript">
        text = "<family><person><name>Tiny Guo</name><age>25</age><profession>photographer</profession></person></family>";
        if (window.DOMParser) {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text, "text/xml");
        }else {
            //IE浏览器用loadXML()方法载入字符串
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false; //判断是否异步进行
            xmlDoc.loadXML(text);
        }
        document.write("XML字符串已被载入");
    </script>
</body>
</html>
运行结果：

为了使加载函数更容易维护，可以把加载XML文档的代码存储在函数中。

XML DOM的对象方法、属性以及对节点的操作与HTML DOM中的基本相同，就不重复写了。下面写点前面HTML DOM里面没写过的。

克隆节点

使用cloneNode()来复制一个节点，并把它追加到XML文档的根节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Clone</title>
</head>
<body>
    <script type="text/javascript">
        function loadXMLDoc(doc) {
            if (window.XMLHttpRequest) {
                xhttp=new XMLHttpRequest();
            } else {
                xhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",doc,false);
            xhttp.send();
            return xhttp.responseXML;
        }

        xmlDoc = loadXMLDoc("demo.xml");
        //克隆person标签中的第一个节点
        x = xmlDoc.getElementsByTagName('person')[0];
        cloneNode = x.cloneNode(true);
        xmlDoc.documentElement.appendChild(cloneNode);

        //输出name节点的所有文本值
        y = xmlDoc.getElementsByTagName("name");
        for (var i = 0; i <= y.length; i++) {
            document.write(y[i].childNodes[0].nodeValue);
            document.write("<br>");
        }
    </script>
</body>
</html>
运行结果：

关于对象、对象属性和对象方法

可能初学者一开始对这三个东西没什么大感觉，感觉好像简单的代码也能写，但是到后面就会稀里糊涂，啥是对象啊？啥是对象属性啊？对象方法又是啥？

这里来通俗的解释一下这三个东西：
对象，可以理解为任何一个被操作的东西；
对象属性，反应对象的某些特定性质的，比如数据的字节数、图片的大小等。表现形式一般为"对象名.属性名"；
对象方法，能够在对象上执行的动作。表现形式为函数。函数名一般开头为setxxx()、getxxx()、removexxx()之类的。

具体的对象有需要且不清楚不知道的时候可以度娘，已经是个大孩子了，要学会自己搜索信息。

其他的点

  • 在DOM解析时，不同的浏览器处理节点之间的换行、空格字符时，操作是不同的。IE浏览器不会把空的空白或换行作为文本节点，但是其他浏览器会。example： 
<!-- 以下代码显示demo.xml文档的根元素有多少个子节点 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Clone</title>
</head>
<body>
    <script type="text/javascript">
        function loadXMLDoc(doc) {
            if (window.XMLHttpRequest) {
                xhttp=new XMLHttpRequest();
            } else {
                xhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",doc,false);
            xhttp.send();
            return xhttp.responseXML;
        }

        xmlDoc = loadXMLDoc("demo.xml");
        
        x = xmlDoc.documentElement.childNodes;
        document.write("Have " + x.length + " child nodes");
    </script>
</body>
</html>

节点之间包含了换行、空白符。

  • 可以通过检查节点类型来忽略元素节点之间的空文本字节。

相关文章

  • Web基础复习——DOM

    DOM Document Object Model，文档对象模型。是HTML和XML文档的编程接口。DOM将HTM...

  • web API—DOM基础

    导读 什么是API？ API（Application Programming Interface 应用程序编程接口...

  • DOM操作和样式操作库的封装

    一、DOM常用方法和属性复习 以下粗略的罗列一下DOM的常用方法和属性，由于不是介绍DOM的基础内容，所以就不一一...

  • Web基础复习——JSON

    什么是JSON JavaScript Object Notation，JS对象表示方法。是轻量级的文本数据交换格式...

  • Web基础复习——AJAX

    AJAX是什么 AJAX，Asynchronous JavaScrpt and XML，异步的JS和XML。不是新...

  • Web基础复习——BOM

    写在前面：这一部分的内容本应该在JS里的，但我觉得还是应该在写完DOM之后，再把它拿出来简单写一下会更好一些，所以...

  • 13-JS高级（一）--JS基础复习

    JavaScript基础知识复习 JavaScript包含：ECMAScript：规定js的语法规范；DOM：Do...

  • DOM

    因为最近看浏览器编译原理，感觉对基础知识比较模糊，所以复习一下。 DOM是什么 HTML DOM 是关于如何获取、...

  • 笔记：JS周报

    总览： 基础语法 变量与运算符 对象与函数 DOM 基础语法： web中的三种语言， HTML 定义了网页的内容；...

  • 复习DOM

    何为DOM? DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Obje...

网友评论

      本文标题：Web基础复习——DOM

      本文链接：https://www.haomeiwen.com/subject/sngsbqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Web基础复习——DOM|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！