关于DOM的初步认识

最新推荐文章于 2022-08-23 19:48:27 发布

牛亚光的Meteor学习笔记

最新推荐文章于 2022-08-23 19:48:27 发布

阅读量317

点赞数

分类专栏： DOM学习的初步认识

本文链接：https://blog.csdn.net/nyg777/article/details/54970346

版权

DOM学习的初步认识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一，什么是DOM？

通过学习，了解到DOM是针对HTML和XML文档的一个API（应用程序接口）。翻译成中文就是文档对象模型。它代表文档内容的结构关系。Dom具有对Html文件和XML文件元素的访问控制能力，简单点说利用Dom可以对某个html或xml文件添加，修改，删除元素。更改其现有的结构或内容．例如树有许多枝干，枝干上面有叶子（元素），DOM好比是树的枝干部分。

二，DOM的作用

Dom可以在网页中做什么？

HTML Dom中最常用的几个方法之查找元素

Dom之引用当前整个网页文档：document
Dom如何快速在网页中查找某一元素：getElementById
Dom中查找一组标签，具有相同名称的标签元素：getElementsByTagName
根据标签的Id属性值或name属性来查找多个元素：getElementsByName

1，DOM里面有childNodes、parentNode各种各样的节点。可以通过DOM找到节点位置。

例如：

<body>
<p></p>
<ul id="ul1">
    <li class="bos">1</li>
    <li>2</li>
    <li>3</li>
    <li class="bos">3</li>
    <li>3</li>
    <li>3</li>
    <li class="bos">3</li>
</ul>

</body>

其中<body>就是<ul>的父节点 ul是li的父节点；<p>与<ul>是兄弟节点；

用代码证明如下

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      window.onload=function () {
          var oul=document.getElementById("ul1");
          alert(oul.parentNode);
      }
    </script>
</head>