什么是DOM + 获取页面元素 + 类数组转成数组的方式 + 一些数组的方法(entries,keys)

前端小草籽

已于 2022-08-12 21:48:33 修改

阅读量1.3k

点赞数 2

分类专栏： Dom操作文章标签：前端 javascript 大数据

于 2022-07-14 17:29:13 首次发布

本文链接：https://blog.csdn.net/weixin_47075145/article/details/125777181

版权

Dom操作专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.什么是DOM

2.如何获取页面元素

1.根据id获取元素

2.根据标签获取元素 getElementsByTagName

3. 根据name属性获取元素

4. 根据class属性获取元素

5. 根据选择器来查找元素

5.1 document.querySelector()

5.2 document.querySelectorAll()

6.获取某个元素的父元素 parentElement;

节点表示方法：Node, 父节点：parentNode

7.获取某个元素的子元素们 chidren; 推荐

8.获取某个元素的弟弟元素（同层次的下一个元素） : nextElementSibling

9.获取某个元素的哥哥元素（同层次的上一个元素）：previousElementSibling

10. 获取某一个元素第一个子元素 firstElementChild

11.获取某一个元素最后一个子元素 lastElementChild

3.哪些方法获取到的是数组，哪些方法获取到的是类数组？

4.类数组转成数组的方法

方法1：通过Array.from() 方法

方法2：通过扩展运算符 ...

编辑方法3：利用apply展开

5.数组的一些方法

1. entries() 得到一个遍历器对象

2.keys()方法得到一个遍历器对象

1.什么是DOM

文档对象模型（Document Object Model），简称DOM,是一种标准的编程接口.文档对象模型 DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口

W3C已经定义了一些列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

DOM树：

注：

1.文档：一个页面就是一个文档，DOM中使用document表示

2.元素：页面中所有标签都是元素，DOM中用element使用

3.节点：网页中所有内容都是节点(标签，属性，文本，注释等)，DOM中使用node表示

DOM把以上内容都看做对象。

4.把文档中的代码翻译成一个对象模型 在这个模型中 所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象统称节点对象 这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点同胞节点等等(没有子节点的叫叶节点)

01.只有一个根节点document

02.除了根节点外所有节点都有唯一的一个父节点

03.document是window对象的属性（document不是关键字）

但它直接可以用,为什么呢？因为它是window对象的属性，省略了window

04.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象 BOM操作会在接下来的知识点讲到它不属于标准的接口但是浏览器厂商都提供了几乎一样的功能

05.元素的属性也是独立节点叫属性节点但是不是元素节点的子节点

节点和元素一般是一样的，除了 html

2.如何获取页面元素

1.根据id获取元素

// get 获取  Element 元素   By 通过  Id 标识
var div = document.getElementById('main');
// console.log(div)
// 打印对象，展开后，通过proto可以查看元素的属性，div返回的是HTMLDivElement
console.dir(div)

注意：如果页面上没有对应的id，此时返回null

2.根据标签获取元素 getElementsByTagName

得到是一个伪数组。所以不能直接通过数组名.style.backgroundColor这些设置样式

divs.style.backgroundColor这种设置就是错的。

// 获取到的是HTMLCollection  集合，也就是 伪数组
var divs = document.getElementsByTagName('div');
console.log(divs)
// 通过遍历，获取数据中的每一个元素
for (var i = 0; i < divs.length; i++) {
	console.log(divs[i]);
	// divs中每一个元素都是HTMLDivElement类型
}

注意：因为通过getElementsByTagName获取到的是一个伪数组，所以当没有对应的标签的时候，返回的是0。

3. 根据name属性获取元素

得到是一个伪数组。所以不能直接通过数组名.style.backgroundColor这些设置样式

document.getElementsByName()

注意：此方法不推荐使用，因为在IE和欧朋浏览器中，通过这个方式会获取到相同的id的元素

4. 根据class属性获取元素

得到一个伪数组

document.getElementsByClassName()

返回的也是一个伪数组
存在兼容性问题，IE9+

注意点：前面这几个方法都是 H5之前出现的，不能用forEach方法遍历，可以用for循环，下面的

document.querySelector()和document.querySelectorAll()是h5出的，document.querySelectorAll()得到的伪数组可以用forEach，如果要h5之前的方法得到的伪数组调用forEach，就必须转为数组（利用Array.from将伪数组转为数组）

5. 根据选择器来查找元素

5.1 document.querySelector()

返回文档中匹配指定的选择器组的第一个元素

5.2 document.querySelectorAll()

返回文档中匹配指定的选择器组的所有元素，得到一个类数组

这两个方式都是根据选择器来获取元素
querySelector()只能返回第一个匹配到的元素
querySelectorAll()能返回所有匹配到的元素
这两个方式很强大，但是他们存在兼容性问题，支持IE8+
如果是移动端开发可以放心使用这两个方式，移动端浏览器均支持这两个方式

6.获取某个元素的父元素 parentElement;

先获取这个元素，再获取这个元素的父元素

元素与节点的关系：

节点表示方法：Node, 父节点：parentNode

元素也叫标签，一般元素的父元素就是父节点，但是html元素不一样，它没有父元素为null，但是它有父节点（根节点 document）

7.获取某个元素的子元素们 chidren; 推荐

子节点：chidrenNodes; 不推荐会把很多什么空格符，换行符全算进去。

子元素可能不止一个，所以返回的是一个 类数组,可通过length属性遍历。

8.获取某个元素的弟弟元素（同层次的下一个元素） : nextElementSibling

返回弟弟元素，若没有弟弟元素，则返回null

弟弟节点：nextSibling 因为节点包括很多（元素，空格，文本等），所以如果代码有换行这些，节点数比元素个数要多，我们一般选择元素。

9.获取某个元素的哥哥元素（同层次的上一个元素）：previousElementSibling

返回哥哥元素，若没有哥哥元素，则返回null

哥哥节点：previousSibing

10. 获取某一个元素第一个子元素 firstElementChild

若没有元素，则返回null，表示里面没有子元素，有文字节点，或者空节点这些

注意点：获取某一个元素第一个子元素的替代方法：

<body>
    <div id="num">
        <div id="num1">num1</div>
        <div id="num2">num2</div>
        <div id="num3">num3</div>
        <div id="num4">num4</div>
        <div id="num5">num5</div>
    </div>
    <script>
        //因为获取某一个元素的子元素们  children 是一个类数组
        //通过数组下标取0得到第一个子元素
        //先获取父元素
        var fa = document.querySelector('#num');
        var fa_firstSon = fa.children[0];
        console.log(fa_firstSon); //<div id="num1">num1</div>
    </script>
</body>

获取某一个元素第一个子节点：firstChild

获取第一个子节点替换方法：

var fa_firstSon = fa.childrenNode[0];

11.获取某一个元素最后一个子元素 lastElementChild

获取某一个元素最后一个子节点：lastChild

注意点：获取某一个元素最后一个子元素的替代方法：

<body>
    <div id="num">
        <div id="num1">num1</div>
        <div id="num2">num2</div>
        <div id="num3">num3</div>
        <div id="num4">num4</div>
        <div id="num5">num5</div>
    </div>
    <script>
        //因为获取某一个元素的子元素们  children 是一个类数组
        //通过数组取下标取 length-1 得到最后一个子元素
        //先获取父元素
        var fa = document.querySelector('#num');
        //注意这里取下标一定是 数组取下标，不能直接 [length-1],这个length不知道是谁的length
        var fa_lastSon = fa.children[fa.children.length-1];
        console.log(fa_lastSon); //<div id="num5">num5</div>
    </script>
</body>

获取某一个元素的最后一个子节点的方法：

var fa_lastSon = fa.childrenNode[fa.children.length-1];

12.获取当前网页的地址 document.URL

    <script>
        console.log(document.URL); //http://127.0.0.1:5502/ioi.html
    </script>

附上代码:

<body>
    <div class="box1">
        <div class="box2" id="box4">2</div>
        <div class="box2" id="isbox2">
            <div class="box3" id="box5">3</div>
            <div class="box3" id="box6">5</div>
        </div>
        <div class="box4">4</div>
    </div>
    <script>
        //利用 选择器 来查找元素, # id选择器标志   先获取这个元素
        var box4 = document.querySelector('#box4');
        //找某一个元素的父元素    parentElement;  再找到它的父元素
        var box4Father = box4.parentElement;
        console.log(box4Father);  //<div class="box1"></div>
        //找某一个元素的父节点 parentNode
        var box4Fnode = box4.parentNode;
        console.log(box4Fnode);   //<div class="box1"></div>
        
        //子节点： children;   这里利用 选择器 来查找元素，.类选择器标志 
        var box1 = document.querySelector('.box1');
        var box1_children = box1.children;   //子元素们
        var box1_childNode = box1.childNodes;//子节点们
        console.log(box1_children);   //子元素们 推荐用
        console.log(box1_childNode);  //子节点们

        //弟弟节点： nextElementSibling
        var isbox2 = document.querySelector('#isbox2');
        var isbox2_Sibling = isbox2.nextElementSibling;
        console.log(isbox2_Sibling);

        //哥哥节点：previousElementSibling
        var isbox2_PreSibling = isbox2.previousElementSibling;
        console.log(isbox2_PreSibling);

        //第一个子元素 firstElementChild
        var isbox2_fc = isbox2.firstElementChild;
        console.log(isbox2_fc);
        //最后一个子元素lastElementChild
    </script>
</body>

案例：获取自己是父元素中的第几个子元素/节点，怎么做？

<body>			
    <div id="num">
        <div id="num1">num1</div>
        <div id="num2">num2</div>
        <div id="num3">num3</div>
        <div id="num4">num4</div>
        <div id="num5">num5</div>
    </div>
    <script>
        //获取自己是父元素中的第几个子元素/节点
        //要求：
        //获取某元素，调用它调用某个方法，可以实现，返回出自己在父元素的子元素数组中的下标
        //设计这个方法
        //获取的元素是一个对象，而原型链上没有对应的方法，所有封装一个
        Object.prototype.index_xb=function(){
            var arr =this.parentElement.children;  //某个元素的父元素的所有子元素
            for(let i=0;i<arr.length;i++){        //遍历某个元素的父元素的所有子元素
                if(arr[i]===this){               //当某个下标对应的子元素元素和获取的元素相等
                    return i;                    //则返回对应的下标
                }
            }
        }
        var index = document.querySelector('#num5').index_xb();
        console.log(index);  //4
    </script>
</body>

3.哪些方法获取到的是数组，哪些方法获取到的是类数组？

记住一句话：通过 document.getElementById() 和通过 document.querySelector() 方法获取到的是某个元素，其它方法获取到的都是类数组。

4.类数组转成数组的方法

为什么要进行类数组转成数组？因为数组的一些方法类数组没有。

因为通过ES5的方法，例如： document.getElementsByClassName() 获取到的类数组，不支持一些新的循环方法，比如不支持 forEach循环，支持for循环。

通过ES6新增的方法，document.querySelectorAll() 获取到的类数组既支持for循环，也支持forEach循环。

但还是要了解把类数组转换成数组的方法：

方法1：通过Array.from() 方法

<body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <script>
        let divAll = document.getElementsByClassName('box');
        console.log(divAll);
        console.log(Array.from(divAll));
    </script>
</body>

结果：

方法2：通过扩展运算符 ...

<body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <script>
        let divAll = document.getElementsByClassName('box');
        console.log(divAll);
        console.log([...divAll]);
    </script>
</body>

方法3：利用apply展开

apply方法的第二个参数是数组，也可以是类数组，在调用的时候会将第二个参数依次展开。

过程类似扩展运算符。

<body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    <script>
        let divAll = document.getElementsByClassName('box');
        console.log(divAll);
        let divArr = [].concat.apply([],divAll)
        console.log(divArr);
    </script>
</body>

5.数组的一些方法

1. entries() 得到一个遍历器对象

<body>
    <div class="box">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
        <div class="box box5">box5</div>
    </div>
    <script>
        let box = document.querySelector('.box');
        //entries()方法产生一个遍历器   通过console.dir(对象) 查看对象有没有entries()方法
        console.log(box.childNodes.entries()); //Array Iterator{} 遍历器对象的形式
        //结合 for of 使用   
        for (var item of box.childNodes.entries()) {
            console.log(item);  //得到的是键值对的形式
        }
    </script>
</body>

分析：得到的是数组，里面两个元素，第一个元素是键，第二个元素是值，也就是类似于键值对的形式

2.keys()方法得到一个遍历器对象

<body>
    <div class="box">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
        <div class="box box5">box5</div>
    </div>
    <script>
        let box = document.querySelector('.box');
        //keys()方法产生一个遍历器   通过console.dir(对象) 查看对象有没有keys()方法
        console.log(box.childNodes.keys()); //Array Iterator{} 遍历器对象的形式
        //结合 for of 使用   
        for (var item of box.childNodes.keys()) {
            console.log(item);  //得到的是键的形式
        }
    </script>
</body>