dom-自定义属性操作和节点操作

最新推荐文章于 2023-03-14 22:39:44 发布
最新推荐文章于 2023-03-14 22:39:44 发布
阅读量503 收藏
点赞数
分类专栏： apl 节点操作 文章标签： javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46082115/article/details/129047099
版权

1.自定义属性操作

1.1自定义属性操作

  <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>

1.2设置属性值

   // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

1.3移除属性

    // class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');

1.4案例： tab切换

<!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>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul.menu {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

        ul li {
            width: 100px;
            list-style-type: none;
            background-color: aliceblue;
            text-align: center;
            padding-right: 10px
        }

        div.content {
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        div.content div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            position: absolute;
            opacity: 0;
        }

        div.content div.active {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="menu">
            <li data-i='0'>a</li>
            <li data-i='1'>b</li>
            <li data-i='2'>c</li>
            <li data-i='3'>d</li>
        </ul>
        <div class="content">
            <div class="active">a内容页</div>
            <div>b内容页</div>
            <div>c内容页</div>
            <div>d内容页</div>
        </div>
    </div>
    <script>
        var liEles = document.querySelectorAll(".menu li")
        var divEle = document.querySelectorAll(".content div")

        liEles.forEach(function (liEle, i) {
            liEle.addEventListener('click', function () {
                divEle.forEach(function (item, index) {
                    if (i === index) {
                        item.className = "active";
                    } else {
                        item.className = "";
                    }
                });
            })
        })
    </script>
</body>

</html>

2.节点操作

2.1概述：

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

2.2 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

2.3 父级节点

  <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>

2.4子节点

  <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>

思考：如何获取第一个子元素节点或最后一个子元素节点呢？

  <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

2.5兄弟节点

 <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

2.6创建节点

//创建一个新的元素节点
document.createElement('第一个节点')

2.7 增加节点

 <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>

2.8 删除节点

 <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

2.9复制（克隆）节点

<ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

2.10创建元素的三种方式

2.10.1innerHTML字符串拼接方式（效率低）

<script>
    function fn() {
        var d1 = +new Date();
        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

2.10.2 createElement方式（效率一般）

<script>
    function fn() {
        var d1 = +new Date();

        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

2.10.3 innerHTML数组方式（效率高）

<script>
    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

睡醒说 hi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dom-serializer：渲染dom节点
02-09
这包括所有子节点、属性和文本内容，使得开发者可以方便地查看或保存DOM的状态。 2. **自定义规则**：库提供了自定义渲染规则的能力，比如你可以选择是否保留空白字符、是否输出注释节点、如何处理属性等。这种灵活...
jQuery原理系列-常用Dom操作详解
11-25
但当涉及到DOM节点的固有属性时，例如`checkbox`的`checked`属性，使用`$(el).prop(name, val)`更为合适，因为`prop`方法专门用于读写这些属性，而`attr`则同时适用于固有属性和自定义属性，但某些特殊固有属性仅能...
dom元素操作的常用方法（创建、添加、删除、修改属性）
wanghe1111_的博客
03-05 2959
dom元素操作（创建、添加、删除、修改属性）
DOM--自定义属性的操作
JJ_Smilewang的博客
06-15 2320
DOM元素属性分为内置属性和自定义属性，比如我们常见的class、id、src、input等属性，都是内置属性，简单理解就是元素自带的属性。而自定义属性就是程序员为了方便使用而自己给元素设置的属性。① element.属性 获取属性值。 ② element.getAttribute('属性');区别： (1) element.属性 获取内置属性值（元素本身自带的属性），如img..src (2) element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性;
DOM（三）修改元素属性、样式、添加/删除元素
热门推荐
商务合作 | 共同学习 | 携手共进
09-24 2万+
JavaScript DOM：修改属性、修改样式，添加/删除元素。
js DOM操作自定义属性
RayShyy的博客
03-19 4239
自定义属性：在日常开发中，html的内置属性已经无法满足程序员的日常开发，所以需要我们自己定义属性，H5给我们新增了自定义属性，为了防止自定义属性和内置属性引起歧义，所以H5规定自定义属性以data-开头定义。 1. 获取元素的属性值 element.属性名 element.getAttribute(“属性名”) element.属性名 和 element.getAttribute(“属性名”) 的区别： element.属性名：获取的是内置属性(元素本身自带的属性)，不能获取自定义属性； elem.
前端基础(十)_Dom自定义属性(带案例)
见贤思齐焉，见不贤内自省
01-10 1225
Dom自定义属性(带案例)
示例4：操作节点属性.rar_javascript操作节点属性
09-20
每个HTML元素都是一个DOM节点，包括元素节点、属性节点和文本节点。在JavaScript中，我们可以使用`document`对象来获取页面上的任何元素，比如通过`getElementById()`、`getElementsByClassName()`、`...
易语言DOM操作
07-20
2. **节点操作**：在DOM模型中，每个元素、属性、文本等都是一个节点。你可以使用`获取子节点`、`获取父节点`、`获取兄弟节点`等命令来遍历和访问这些节点。对于节点的修改，可以使用`设置节点值`、`添加子节点`、`...
jasmine-dom-custom-matchers:jasmine 2.0 DOM自定义匹配器，用于比较html元素和文本节点的关系，属性，样式和状态
05-14
在本文档中描述jasmine-dom-custom-... 检查实际对象是否是其父级的第n个孩子[请参见下文] 检查期望的节点是否是实际节点的父节点[请参见下文] 检查我的实际节点和预期节点是否具有相同HTML元素父级[请参见下文]
DOM操作标签与jQuery框架
weixin_64178950的博客
04-29 2042
今日内容概要1 > DOM操作标签1.1 > 动态创建一个a 标签1.2 > 默认与自定义属性1.3 > getAttribute和removAttribute 方法1.4 > innerText与innerHTML2 > 获取值操作2.1 > 获取普通值数据2.2 > 获取文件数据3 > 属性操作3.1 > 类属性操作3.2 > 样式操作4 > 事件5 > 事件案例5.1 > 数据校验5.2 > 搜索框案例5.3
JavaScript-DOM-属性节点
十二的博客
04-27 2011
JavaScript-DOM-属性节点
20230314----重返学习-原生JavaScript开发思路-DOM自定义属性-JavaScript编程思想-匿名函数具名化-jQuery
seetoyou的博客
03-14 430
给DOM元素对象设置自定义属性的方式对象的成员访问原理:直接操作DOM元素对象的堆内存空间基于去管理原理:直接设置在元素的标签上所以所设置的属性值都会转换为字符串，并且属性名不区分大小写因为所有属性在标签上都是字符串属性名都会转为小写两种方式因为原理不一样，所以不能混在一起使用除非一些特殊的内置属性例如id，在结构中设置，在堆内存空间中也有改了堆内存中的信息元素标签的结构也跟着改变了这个叫做DOM映射jQuery是一个前端框架或类库。它里面封装了大量的方法，可以简化我们。
DOM操作元素-样式属性操作
NY_21的博客
01-19 2533
我们可以通过 JS 修改元素的大小、颜色、位置等样式。element.style 行内样式操作element.className 类名样式操作一、element.style 行内样式操作使用element.style 获得修改元素的样式。更改的结果会变为行内样式。使用方法为： 要修改的元素.element.style.想要更改的样式 = ‘更改的样式’注意：JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor。
DOM（含思维导图，笔记）
weixin_73630788的博客
11-05 397
DOM
js中DOM的自定义属性
安静的对折的专栏
09-17 7680
js中DOM的自定义属性方法有： 1、设置自定义属性：setAttribute 2、获取自定义属性：getAttribute 3、移出自定义属性：removeAttribute 下面就来看一下它们的具体使用方法 Document //获取对象 var txt = document.getElementById("inp"); // c
JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式
王春燕的博客
04-26 5336
当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model），在DOM中，每个东西都是节点。 DOM四大操作：查找、更新、添加、删除 通过DOM，JavaScript 可创建动态的 HTML： 能够改变页面中的所有 HTML 元素 能够改变页面中的所有 HTML 属性 能够改变页面中的所有 CSS 样式 能够对页面中的所有事件做出反应 前提：首先找到相关元素，前面一篇博客，详细的说明了，如何查找相关的元...
JavaScript之DOM自定义属性的使用
weixin_44827643的博客
06-26 656
本文主要介绍DOM中自定义属性的设置、获取及移除。自定义属性比较典型的应用是给元素添加一个“标签”，方便查找该元素或建立此元素同其他元素之间的联系。1.setAttribute用于设置属性的值，若不存在该属性则进行创建2.getAttribute用于获取相应属性的值3.removeAttribute用于移除相应属性。（注：有时某些属性的值通过设置值的方式达不到效果，就可以进行移除）...
Js中DOM操作详解
前端成长之路
05-21 3689
一、DOM是什么 DOM：（Document Object Model）即文档对象模型。是W3C定义的访问文档的标准，他允许程序动态地访问、更新文档的内容、结构和样式； 二、元素获取 更改文档内容，首先需要获取元素对象，常见的获取元素的方法有标签，ID，类名等等； 1.ID获取元素； 通过ID获取是最方便的方式之一，但是一次只能获取一个，ID重复时，只获取第一个，对于需要大量获取的不太适用； document.getElementById('ID') 2.标签获取元素； 通过标签可以获取指定标签的全部
vue获取子节点自定义属性
最新发布
05-30
你可以通过 `$refs` 属性获取子组件的 DOM 节点，并使用 `getAttribute()` 方法获取自定义属性。例如： ```html <child-component ref="child"></child-component> import ChildComponent from './Child...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值