js Dom

前端小臂猿

于 2021-12-21 20:44:45 发布

阅读量122

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64337756/article/details/122072697

版权

本文详细介绍了JavaScript中DOM操作的相关知识，包括节点获取、节点操作等。节点获取部分讲解了如何通过.children、.childNodes等属性获取不同类型的子节点，以及使用querySelector和querySelectorAll选择元素。节点操作部分则涉及了节点的创建、添加、插入、替换、删除、克隆以及属性的设置、获取和删除等。

摘要由CSDN通过智能技术生成

一 1概念：DOM：Document Object Model 文档对象模型（创建，添加，删除，替换，查找，获取）

2 DOM树：浏览器在解析html文档的时候，为了让他们的层次更明显，将html解析成DOM树的形式，页面当中所有的内容组成了DOM树(DOM树是由节点组成)。

注：节点：页面当中所有的内容都可以称之为节点（元素节点，文本节点，注释节点,...）

一.节点获取（获取到的是一个集合，获取不到返回空集合，获取到的是一个具体的节点，获取不到返回null ）

1.获取直接子节点

父元素.children; 获取直接元素子节点
- 返回值：标准浏览器下（HTMLCollection(3) [ul, p, span]）元素集合
- 兼容问题：IE8及以下会将注释节点获取到
父元素.childNodes; 获取直接子节点
- 返回值:NodeList(length) 节点集合在标准浏览器下会将换行及空格当做文本节点
- 返回的内容跟页面结构有关系（换行及空格）
- 兼容：IE8及以下不将换行及空格作为文本节点（span后的空格作为文本节点）

2.节点属性

nodeType(节点类型)	nodeName(节点名称)	nodeValue(节点值)
1 （元素节点）	大写的标签名	null
3 （文本节点）	#text	文本内容
8（注释节点）	#comment	注释内容
9（文档节点）	#document	null

3.获取父节点

元素节点.parentNode;

var div = document.getElementsByTagName("div")[0];
console.log(div.parentNode);
console.log(div.parentNode.parentNode);
console.log(div.parentNode.parentNode.parentNode);
console.log(div.parentNode.parentNode.parentNode.parentNode);

4.获取相邻节点

IE8及以下不将换行及空格作为文本节点,带有Element没有这个属性IE8及以下，对应的值是undefined

父节点.firstChild; 获取第一个子节点
父节点.fistElementChild; 获取第一个元素节点
父节点.lastChild; 获取最后一个子节点
父节点.lastElementChild; 获取最后一个元素节点
相邻节点.previousSibling; 获取上一个相邻节点
相邻节点.previousElementSibling; 获取上一个相邻元素节点
相邻节点.nextSibling; 获取下一个相邻节点
相邻节点.nextElementSibling; 获取下一个相邻元素节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <p>哈喽</p>
        <li>1</li>
        <li>2</li>
        <li id="test">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var ul = document.getElementsByTagName("ul")[0];
        var ul = document.getElementsByTagName("ul")[0];

        // firstChild;  获取第一个子节点
        // IE8及以下不将换行及空格作为文本节点
        console.log(ul.firstChild);
        console.log(ul.firstChild);


        // fistElementChild; 获取第一个元素节点 
        // 不兼容：E8及以下没有这个属性
        console.log(ul.firstElementChild);
        console.log(ul.firstElementChild);


        // lastChild;  获取最后一个子节点
        // IE8及以下不将换行及空格作为文本节点
        console.log(ul.lastChild);
        console