DOM基础总结 - 爱码网

1、什么是DOM

　　文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

2、DOM结构

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

DOM基础总结

树中所有的框都是节点，文本也是一个节点

包括：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。这是一个初学者的易错点。

二、查找DOM对象

1、直接查找

getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。

2、间接查找

　　获得节点node,包含所有类型的node节点。

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

　　 DOM基础总结

　　获得元素element，仅包含element标签元素的节点。

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

　　一个例子说明上面两种方法的区别

<div >
     文本
    <p>123</p>
</div>

DOM基础总结　

3、操作DOM对象

1、文本操作

innerText 　　　　 //所有的纯文本内容，包括子标签中的文本
innerHTML 　　　　//所有子节点(包括元素、注释和文本节点)
outerHTML 　　　　//返回自身节点与所有子节点

value 　　　　　　//表单元素的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="d1"><span>文本操作</span></div>
    </div>
    <input  id ="d2" type="text" value="123">

    <script>
        var e = document.getElementById("d1");
        var i = document.getElementById("d2")
        console.log(e.innerHTML)
        console.log(e.outerHTML)
        console.log(e.innerText)
        console.log(i.value)


    </script>
</body>
</html>

例子