js之DOM中的元素及节点的操作

最新推荐文章于 2024-08-15 23:54:05 发布

不爱学习的小枫

最新推荐文章于 2024-08-15 23:54:05 发布

阅读量379

点赞数

分类专栏： web js 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_39041459/article/details/111301878

版权

web 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

1、获取元素

1.1 通过id获取

document.getElementById('id');

使用 getElementById() 方法可以获取带有 ID 的元素对象。

1.2 通过标签名获取

// 获取指定标签名的对象集合
document.getElementsByTagName('标签名');
//获取element该元素内指定标签名的子元素集合
element.getElementsByTagName('标签名');

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。还可以获取某个元素(父元素)内部所有指定标签名的子元素，需要将document换成获取的元素。

注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

1.3 通过类名获取

 document.getElementsByClassName(‘类名’)；

根据类名返回元素对象集合

1.4 querySelector和querySelectorAll

 document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
 document.querySelectorAll('选择器'); // 根据指定选择器返回

以上俩种方法中的选择器，可以是多种类型。如果是id选择器，就写成‘#id’，如果是类名选择器，就写成‘.class’，如果是标签选择器，就直接输入标签名。

1.5 获取特殊的元素（body，html）

 doucumnet.body // 返回body元素对象
 document.documentElement // 返回html元素对象

1.6 案例操作

<div id='name' class='name1' >你好啊</div>
<script>
	//通过id获取div元素
   var div1= document.getElementById('name');
   // 通过元素标签获取元素内容
   var div2 = document.getElementsByTagName('div');
   //通过类名获取元素内容
   var div3 = document.getElementsByClassName('div');
 // querySelector 通过id方式获取
 var divById = document.querySelector('#name');
  // querySelector 通过class方式获取
 var divById = document.querySelector('.name1');
  // querySelector 通过标签名方式获取
 var divById = document.querySelector('div');
</script>

2 事件

2.1 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击后触发
onmouseover	鼠标经过时触发
onmouseout	鼠标离开时触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动时触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

3 操作元素

3.1 改变元素内容

//从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerText
//起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
element.innerHTML

3.2 获取属性内容

element.属性 //获取属性值。主要获取内置属性，src，style，class，id等
element.getAttribute('属性'); //可获取自定义属性

3.3 设置属性值

element.属性 = ‘值’ // 设置内置属性值。
element.setAttribute('属性', '值');

3.4 移除属性

 element.removeAttribute('属性');

3.5 自定义属性

（1）自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
（2）自定义属性获取是通过getAttribute(‘属性’) 获取
（3）自定义属性常用data-开头做为属性名并且赋值。
(4) 自定义属性获取，可以用
1. 兼容性获取 element.getAttribute(‘data-index’); 2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

element.setAttribute(‘data-index’, 2)

3.6 案例操作


    <div id="age" index='1'>18</div>
    <script>
        var d = document.querySelector('div');

        // 俩种获取属性的方法
        console.log('----俩种获取属性的方法----');
        console.log(d.id);
        console.log(d.getAttribute('id'));

        //俩种修改属性的方法
        console.log('----俩种修改属性的方法----');
        d.setAttribute('id', 'id1');
        console.log(d.getAttribute('id'));
        d.id = 'id2'
        console.log(d.getAttribute('id'));

        // 添加,修改,删除class属性的方法
        console.log(' ----添加,修改,删除class属性的方法----');
        d.setAttribute('class', 'aaa');
        console.log(d.className);
        d.className = 'bbb';
        console.log(d.className);
        d.removeAttribute('class');
        console.log(d.className);

        //添加自定义属性,可以看打印输出的div中是否存在着俩项属性
        console.log('----添加自定义属性,可以看打印输出的div中是否存在着俩项属性----');
        d.setAttribute('data-index', '1');
        d.setAttribute('data-time', '20');
        console.log(d);
        console.log(d.dataset);
        console.log(d.dataset['index']);
        console.log(d.dataset.time);
    </script>

4 节点操作

4.1 节点描述

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

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

4.2 节点层级

4.2.1 父节点

//父级节点
node.parentNode

4.2.2 子节点

//  返回包含指定节点的子节点的集合，该集合为即时更新的集合。
parentNode.childNodes（标准） 
// 只返回元素类的子节点 
parentNode.children（非标准）
//返回第一个和最后一个节点（含所有的子节点），找不到则返回null。同样，也是包含所有的节点。
parentNode.firstChild 
parentNode.lastChild  
//返回第一个元素节点/最后一个元素节点，找不到则返回null。存在兼容问题，ie9以上不支持
 parentNode.firstElementChild 
 parentNode.lastElementChild

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和
lastElementChild 又有兼容性问题。
那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：

// 如果想要第一个子元素节点，可以使用 
parentNode.chilren[0]
// 如果想要最后一个子元素节点，可以使用 
parentNode.chilren[parentNode.chilren.length - 1]

4.2.3 兄弟节点

//返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
node.nextSibling
//  返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
node.previousSibling 
// 返回下一个元素兄弟节点/上一个元素兄弟节点，找不到则返回null。 存在兼容问题，ie9以上不支持
 node.nextElementSibling 
 node.previousElementSibling

4.3 创建节点

document.createElement('tagName')

4.4 添加节点

// 将一个节点添加到指定父节点的子节点列表末尾。
 node.appendChild(child) 
 //将一个节点添加到父节点的指定子节点前面。
 node.insertBefore(child, 指定元素)

4.5 删除节点

node.removeChild()

4.6 复制节点

node.cloneNode();

1、括号为空或者里面是false 浅拷贝只复制标签不复制里面的内容
2、括号为true 深拷贝复制标签复制里面的内容

4.7 案例实践

 <div class="demo">
        <div class="box2">
            <span>aaa</span>
            <span>bbb</span>
            <span>ccc</span>
        </div>
        <div class="box">
            <span>aaa</span>
            <span>bbb</span>
            <span>ccc</span>
        </div>
        <div class="box1">
            <span>aaa</span>
            <span>bbb</span>
            <span>ccc</span>
        </div>
    </div>
    <script>
        var b = document.createElement('div');
        var box = document.querySelector('.box');

        //父节点
        console.log(box.parentNode);
        //子节点 (节点中包含所有的节点,元素,空格,回车等等)
        console.log(box.childNodes);
        console.log(box.children[0]);
        console.log(box.firstChild);
        console.log(box.lastChild);
        //元素子节点
        console.log(box.firstElementChild);
        console.log(box.lastElementChild);
        //常用的返回首个元素节点和最后一个元素节点的方法
        console.log(box.children[0]);
        console.log(box.children[box.children.length - 1]);

        // 兄弟节点
        console.log(box.nextSibling);
        console.log(box.previousSibling);

        //查下上一个元素的兄弟节点
        console.log(box.nextElementSibling);
        console.log(box.previousElementSibling);

        // 在box的最后添加子节点
        box.appendChild(b);
        // 在box的添加指点第几个子节点
        box.insertBefore(b, box.children[0]);

        //删除节点
        box.removeChild(box.children[1]);

        // 复制节点（true是深度拷贝，会复制子节点的所有内容），默认不写或false，是浅拷贝，只复制节点本身，不复制内部的子节点
        var demo = document.querySelector('.demo');
        var d = demo.children[0].cloneNode(true);
        demo.appendChild(d);
    </script>

小计

今天算是学习js学习了一周了，刚好学到dom相关操作，有时候看来还是需要稍微记录下笔记，以便日后查询，不然又需要重新查找相关的文档。

~~节点部分目前没有学习完成，暂时未更新案例部分，过几天学习完毕后再更新。~~ （已于20201218更新）

不过感觉js的部分好多了，学完了基础，正在学习webApis部分,后面还有jQuery、js高级、ajax、vue等等需要学习，前路漫漫，加油，学习还是稍微有点成果的，从刚开始的对js一点也不感冒，到现在简单的语句好歹能看懂，知道一个关键函数方法的作用，希望早日变强！！！！
---- 20201216