Web基础复习——DOM

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>

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

  • 可以通过检查节点类型来忽略元素节点之间的空文本字节。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,544评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,430评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,764评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,193评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,216评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,182评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,063评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,917评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,329评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,425评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,019评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2赞 353