JS中DOM操做总结

时间 2019-12-12

原文原文链接

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

1、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标签都是其子元素，而这二者是兄弟元素关系。
以上就是一个典型的文档树关系。
2、节点
在DOM中节点包括如下几种：
元素节点；文本节点；属性节点。
元素节点：
文档树中诸如<head><body><ul>等叫作元素节点，标签的名字就是元素的节点名字；
文本节点：
上面说的元素节点是一种结构节点，若是一个文档中所有是元素节点则不会显示任何内容，网页中的大部分的内容都是经过文本节点展示出来的。文本节点老是包含在元素节点内部。
属性节点：
属性节点用来对元素作出更加详细的描述。几乎每一个元素节点都会有一个title属性，用来描述该元素节点是用来干什么的。
3、DOM的相关操做
一、获取元素
获取元素有三种方法能够得到：
(1)getElementById()该方法接收一个参数，这个参数是元素的id属性值，该方法返回一个id属性值为相应值的元素对象
(2)getElementByTagName()改方法也接收一个参数，参数为元素名称，该方法返回的是一个对象数组。即便匹配的元素只有一个一样也会是数组类型，只是数组长度为1。
(3)getElementByClass()该方法接收一个参数，即元素属性为class的值，该方法也返回一个数组。
未完待续浏览器