JavaWeb基础总结之Dom

Dom：Document Object Model（文档对象模型）。是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的。

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

XML DOM

XML DOM 是：

用于 XML 的标准对象模型
用于 XML 的标准编程接口
中立于平台和语言
W3C 标准

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。

换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

HTML DOM

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法（接口）。

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

关于Dom对html的常见操作：

document对象：表示整个文档
常用方法：

write（“”）：想页面输出变量（值），向页面输出html代码
getElementById（）通过Id获得标签对象，获取对象后可以获取对象的属性信息，也可以设置对象的属性值
getElementsByName（）通过name获取一组同名的值，是一个数组，便利得到对象，顺便得到相对应的属性值
document.getElementsByTagName（）返回的是一个数组通过标签名获取相应的对象顺便获取相对应的值
创建标签：document.createElement("标签名称")
创建文本：document.createTextNode("文本内容")
把文本内容添加到父节点下面：appendchild方法

元素对象：element对象

getAttribute（“value”）可以获取到相应属性的值
setAttribute（“属性名”，“属性值”）设置标签里面的属性名
removeAttribute（“属性名称”）但是不可以删除属性value的值
获取标签下面的子标签：数组对象.chaildNodes把父标签下面的标签存入数组（但是兼容性差，一般不用）应该根据getElementsTagName（），方法很好，但是这个方法是document的方法，不是element对象的方法
insertBefore（newNode，oldNode）在某个节点之前插入一个新的节点
ul2.insertBefore（ul5，ul3）在ul2和ul3之间插入ul5
removeChild删除节点，通过父节点删除掉自己
父节点.replaceChild（newNode，oldNode）用新节点替换父节点底下的旧节点
cloneNode（）复制标签节点内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function () {
            //通过id得到对象
            var ele=document.getElementById("test");
            alert(ele.textContent)
            //通过name属性名得到对象数组
            var arr=document.getElementsByName("test");
            for(var i=0;i<arr.length;i++){
                alert(arr[i].textContent)
            }
            //通过标签名得到对象数组
            var arr2=document.getElementsByTagName("p")
            for(var i=0;i<arr2.length;i++){
                alert(arr2[i].textContent)
            }
           // document.write("<input type='text' value='Is-Me-HL'/>")
            // 上面这行代码是document直接向html页面输出数据，就是直接用数据覆盖原先的页面

            //下面进行的是创建一个文本框对象，然后给他value属性设置默认值Is-Me-Hl，
            // 然后添加到html页面中的body元素里的末尾，注意：是添加，不是覆盖，要和document.write()区分开来
            var input=document.createElement("input")
            input.type='text'
            input.value="Is-Me-HL"
            var body=document.getElementsByTagName("body")
            body[0].appendChild(input)

            //下面也是执行一个创建Element元素及添加一个元素的过程，原理同上，只是这次想给他赋值的是标签对中的文本值
            //创建p标签
            var p=document.createElement("p")
            p.innerText="Hello，"
            body[0].appendChild(p)
            //功能同上
            var TextNode=document.createTextNode("I am Is-Me-HL")
            p.appendChild(TextNode)

            //通过对象得到属性值和设置属性值，拿id为test的测试
            //一开始已经拿到test元素对象了，name下面直接看看其操作
            //得到id为test的元素的name属性，因为name属性也是test，所以不好区分的话，那么我先设置其name值为其他，如https://blog.csdn.net/m0_37265215
            ele.setAttribute("name","https://blog.csdn.net/m0_37265215")
            //设置完成后，再得到其name的值，看是不是https://blog.csdn.net/m0_37265215
            alert(ele.getAttribute("name"))

            //增加一个属性，然后进行删除操作
            ele.setAttribute("TestId","1")
            alert(ele.getAttribute("TestId"))
            //进行删除
            ele.removeAttribute("TestId");
            alert(ele.getAttribute("TestId"))

        }
    </script>
</head>
<body>
<p id="test" name="test">Is-Me-Hl</p>
<p id="test1" name="test">Is-Me-Hl-1</p>
<p id="test2" name="test">Is-Me-Hl-2</p>
</body>
</html>

注：以上文章仅是个人学习过程总结，若有不当之处，望不吝赐教。