JS中DOM操纵总结

2024年2月24日 200次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞