JS中DOM操作总结

2024年3月4日 139次阅读 来源: zkkang

最近在找春季实习生工作，为了准备实习面试笔试，开通属于自己的专栏来记录自己的学习过程，同时也是为了检验自己是否真正的理解了学习的知识点。

一、DOM概念

今天学习的是JavaScript中的DOM操作。说起DOM操作，首先我们需要知道什么是DOM，DOM也叫文档对象模型，其中D代表的是Document,即文档；O代表的是Object,即对象；M代表的是model，即模型。
所谓模型，其实就是某种事物的表现形式，就像是一个火车模型代表的是真是的火车一样，DOM代表的是加载到浏览器并呈现在用户眼前的网页。DOM把一份文档表示成一棵树，叫做DOM树。既然有了树的概念，那就还有根，父节点，子节点，兄弟节点的概念了。在下面的网页中我们看一个例子：

    <!Doctype html>
    <html>
        <head>
            <title>这是测试例子</title>
        </head>
        <body>
            <div>
                <ul>
                    <li>例子</li>
                    <li>例子</li>
                </ul>
                <p>段落测试</p>
            <div>
        </body>
    </html>

以上例子我们可以看到，<html>标签为根标签，接下来<head>和<body>标签属于<html>的子元素或者是子节点，在<head>标签中，<title>又是<head>的子标签，<body>中<div>是其子标签，<div>标签中<ul>与上面的p标签都是其子元素，而这两者是兄弟元素关系。
以上就是一个典型的文档树关系。
二、节点
在DOM中节点包括以下几种：
元素节点；文本节点；属性节点。
元素节点：
文档树中诸如<head><body><ul>等叫做元素节点，标签的名字就是元素的节点名字；
文本节点：
上面说的元素节点是一种结构节点，如果一个文档中全部是元素节点则不会显示任何内容，网页中的大部分的内容都是通过文本节点展现出来的。文本节点总是包含在元素节点内部。
属性节点：
属性节点用来对元素做出更加详细的描述。几乎每个元素节点都会有一个title属性，用来描述该元素节点是用来干什么的。
三、DOM的相关操作
1、获取元素
获取元素有三种方法可以获得：
(1)getElementById()该方法接收一个参数，这个参数是元素的id属性值，该方法返回一个id属性值为相应值的元素对象
(2)getElementByTagName()改方法也接收一个参数，参数为元素名称，该方法返回的是一个对象数组。即使匹配的元素只有一个同样也会是数组类型，只是数组长度为1。
(3)getElementByClass()该方法接收一个参数，即元素属性为class的值，该方法也返回一个数组。
未完待续

    原文作者：zkkang
    原文地址: https://segmentfault.com/a/1190000004908449
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞