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()
过程：

创建一个新的元素：var para=document.createElement("h1");
假设要向这个元素添加文本，则要创建文本节点：var node=document.createTextNode("这是一个大标题");
要把这个新的元素和文本节点连起来，不能让它们孤零零地各自在一边：para.appendChild(node);
必须要向已有的元素追加这个新的元素，所以先查找已有代码段中存在的元素：var element=document.getElementById("1");
向已有的元素追加新的元素：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元素时，必须清楚该元素的父元素。从父元素中删除要删除的子元素。

找到父元素：var parent=document.getElementById("1");
找到要删除的子元素：var child=document.getElementById("2");
删除：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解析器

大概流程：

加载XML文档到XML DOM对象中；
解析器读取XML文档；
把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>

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

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