JavaScript：DOM操作 - 简介

在一个html页面中，会使用很多标签来规划制作页面。

每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找 到这个标签元素

如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一 片叶子，应该怎么做？

“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一 片叶子都不是难事了

叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”。

文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节 点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了

　　在节点树中，顶端节点就是根节点（root）

　　每个节点都有父节点（除了根节点）

　　任何一个节点都可以拥有任意数量的子节点

　　同胞是拥有相同父节点的节点

<html>
    <head>
        <meta charset="utf-8">
        <title>DOM 教程</title>
    </head>    
    <body>
        <h1>第一节：HTML DOM</h1>
        <p>Hello world!</p>
    </body>
</html>

 

从上面的 HTML 中：

　　<html>节点没有父节点；它是根节点

　　<head> 和 <body>的父节点是<html> 节点

　　文本节点 "Hello world!" 的父节点是<p>节点

 

并且：

　　节点拥有两个子节点： <head>和<body>

　　<head>节点拥有两个子节点：<meta> 与 <title> 节点

　　<title>节点也拥有一个子节点：文本节点 "DOM 教程"

　　<h1>和<p>节点是同胞节点，同时也是<body> 的子节点 

 

并且：

　　<head>元素是 <html>元素的首个子节点

　　<body>元素是 <html> 元素的最后一个子节点

　　<h1>元素是<body>元素的首个子节点

　　<p>元素是 <body>元素的最后一个子节点

js为我们提供了很多种方法来实现在页面找查找某个元素节点

　　

posted @ 2021-08-12 20:03  Jasper2003  阅读(37)  评论(0)  编辑  收藏  举报