JavaScript:DOM操作 - 简介

时间:2021-08-12
本文章向大家介绍 JavaScript:DOM操作 - 简介,主要包括 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为我们提供了很多种方法来实现在页面找查找某个元素节点

  

原文地址:https://www.cnblogs.com/JasperZhao/p/15134454.html