JavaScript（十一）操作Dom节点

最新推荐文章于 2024-07-22 15:13:59 发布

nextdoorloureed

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量84

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45845042/article/details/105775472

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

18，操作Dom节点

18.1，获取

获取dom的节点的方式主要有三种id，class，类型
我们通常通过id选择器，唯一选择我们需要的Dom节点，class和类型选择器，用class选择器选择一组节点

var pp =document.getElementById('name');
console.log(pp.innerText);
var h1 = document.getElementsByTagName('h1');
console.log(h1);
var p2 =document.getElementsByClassName('test');
console.log(p2);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/01.数据类型.js">
    </script>
</head>
<body>
<div id='app'>
    <h1>标题</h1>
    <p id="name">p1</p>
    <p class="test">p2
          <p>p21</p>
          <p>p22</p>
          <p>p23</p>
    </p>
    <p>p3</p>
    <p>p4</p>
</div>
</body>
</html>

//获取div下的所有直属子节点
var div =document.getElementsByTagName('div');

    console.log(div[0].children);

//混合使用三大选择器
//获得div标签下的h1标签(id+类)
var h1 = document.getElementById('app').getElementsByTagName('h1');

//获得div标签下的p1标签(id+class)
var p2 = document.getElementById('app').getElementsByClassName('test');

//获得p2标签下的第一个子节点和最后一个子节点
var p21= p2.firstElementChild;
var p23= p2.lastElementChild;

querySelector()和querySelectorAll()

利用css语法返回带查询的结果

querySelector()：该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。

querySelectorAll()：该方法返回所有满足条件的元素，结果是个nodeList集合。

var arr =document.querySelectorAll('p');

在这里插入图片描述

用法上有两个需要注意的点：

这个查询是实时查询，当我们的JS代码中出现对节点的增删时，再次查询时，结果也会时动态改变的！！
查询时使用css选择器字符串，但是由于存在转义字符，会导致css字符串写法改变（这点极其恶心！）

18.1，更新

innerHTML :可以修改一个DOM节点的文本内容,也可以直接通过HTML片段修改DOM节点内部的子树
innerText ：之间修改Dom节点的文本内容

更新CSS样式

style属性
- DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

18.2，插入

appendChild:把一个子节点添加到父节点的最后一个子节点
insertBefore:可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        'use strict';
        window.onload=function () {
            var
                list = document.getElementById('list'),
                ref = document.getElementById('python'),
                haskell = document.createElement('p');
            haskell.id = 'haskell';
            haskell.innerText = 'Haskell';
            list.insertBefore(haskell, ref);
            
            list.style.color='#40f715';

            //动态添加节点
            //创建节点-设置属性-加入节点
            var d=document.createElement('style');
            d.setAttribute('type','text/css');
            d.innerHTML='p{color:red}';
            document.getElementsByTagName('head')[0].appendChild(d);
        };
    </script>

</head>
<body>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
</body>
</html>

18.3，删除

删除方法：首先获取要删除的节点的父节点，调用父节点的removeChild方法删除指定节点

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

parent.removeChild(parent.children[0]);   //children数据会实时进行更新,原来的children[1],会更新children[0]

nextdoorloureed

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（十一）操作Dom节点

18，操作Dom节点18.1，获取获取dom的节点的方式主要有三种id，class，类型我们通常通过id选择器，唯一选择我们需要的Dom节点，class和类型选择器，用class选择器选择一组节点var pp =document.getElementById('name');console.log(pp.innerText);var h1 = document.getElement...
复制链接

扫一扫

专栏目录