js-api操作dom元素03----元素的属性操作以及节点操作

最新推荐文章于 2022-10-31 21:50:27 发布

A &......

最新推荐文章于 2022-10-31 21:50:27 发布

阅读量363

点赞数

分类专栏： javascript之dom操作文章标签： javascript

本文链接：https://blog.csdn.net/m0_47531829/article/details/117170378

版权

javascript之dom操作专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细讲解了innerText、innerHTML的区别，以及如何通过getAttribute、setAttribute和removeAttribute操作元素属性。此外，还介绍了样式设置的多种方式，如对象.style、className和CSS属性操作。节点类型、名称和值的识别，以及节点关系和插入节点的实践示例，帮助理解DOM操作核心技巧。

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

1.文本内容属性：

   1.1  innerText和textContect的区别
   innerText和textContect的区别不大，作用都是可以解析文本，但是textContect在ie8及以下中存在兼容性问题；
   1.2 innerText和innerHTML的区别：
   innerText主要是设置文本的，设置标签内容，是没有标签效果的；
   innerHTML是可以设置文本内容，可以解析富文本，带有标签和属性的文本；

2.元素的属性操作：

   2.1 获取属性：getArrtibute('属性名字')
   不仅可以获取元素本身的属性的属性值，还可以获取元素自定义属性的属性值

<body>
    <div myName='div1'></div>
    <script>
        console.log(document.querySelector('div').getAttribute('myName'));   //div1
    </script>
</body>

2.2 设置属性：setArrtibute(‘属性名’，‘属性值’)
元素的属性的设置，不仅可以设置元素本身的属性，还可以设置元素自定义的属性；

<body>
    <div myName='div1'></div>
    <script>
        document.querySelector('div').setAttribute('name', 'div2')
    </script>
</body>

  2.3 移除属性：removerAttribute('属性名')
  不仅可以移除元素本身的属性，还可以移除元素自定义的属性

3.元素样式设置的几种方式：

<!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>
        .div {
            width: 200px;
            height: 200px;
            color: blue;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div myName='div1'>111</div>
    <script>
        var div = document.querySelector('div')
        元素样式设置的几种方式 6 种
        3.1 对象.style
        div.style = 'color:red;background-color:pink;font-size:18px;width:200px;height:200px';
        3.2 对象.className
        div.className = 'div'
        3.3 对象.setAttribute('style')
        div.setAttribute('style', 'color:red;background-color:pink;font-size:18px;width:200px;height:200px')
        3.4 对象.setAttribute('class')
        div.setAttribute('class', 'div')
        3.5 对象.style.setProperty('CSS属性', 'CSS属性值')；
        div.style.setProperty('color', 'red')
        3.6 对象.style.cssText 这不是一个方式， 而是对象的一个属性
        div.style.cssText = 'color:red;background-color:pink;font-size:18px;width:200px;height:200px'
    </script>
</body>

</html>

4.节点操作：

   4.1  节点的类型：

<!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>
        <li class="li1">1111</li>
        <li>2222</li>
    </ul>
    <script>
        // 节点类型：document类型  --》9
        console.log(document.nodeType); //9
        // 标签的节点类型：1
        console.log(document.querySelector('li').nodeType); //1
        // 属性的节点类型：2
        console.log(document.querySelector('li').getAttributeNode('class')); //class="li1"
        console.log(typeof document.querySelector('li').getAttributeNode('class')); //Object  类型是对象
        console.log(document.querySelector('li').getAttributeNode('class').nodeType); //2
        //  文本节点类型：3
        console.log(document.querySelector('ul').firstChild.nodeType); //3
    </script>
</body>

</html>

 4.2  节点名称

<!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>
        <li class="li1">1111</li>
        <li>2222</li>
    </ul>
    <script>
        //节点名称
        console.log(document.nodeName); //#document
        // 标签的节点名称：大写的标签名称
        console.log(document.querySelector('li').nodeName); //LI
        // 属性的节点类型：属性类型
        console.log(document.querySelector('li').getAttributeNode('class')); //class="li1"
        console.log(typeof document.querySelector('li').getAttributeNode('class')); //Object  类型是对象
        console.log(document.querySelector('li').getAttributeNode('class').nodeName); //class
        //  文本节点类型：#text
        console.log(document.querySelector('ul').firstChild.nodeName); //#text
    </script>
</body>

</html>

 4.3  节点值：

<!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>
        <li class="li1">1111</li>
        <li>2222</li>
    </ul>
    <script>
        //节点值：
        // document和标签的节点值都为null
        console.log(document.nodeValue); //null
        // 标签的节点名称：大写的标签名称
        console.log(document.querySelector('li').nodeValue); //null
        // 属性的节点类型：属性类型
        console.log(document.querySelector('li').getAttributeNode('class')); //class="li1"
        console.log(typeof document.querySelector('li').getAttributeNode('class')); //Object  类型是对象
        console.log(document.querySelector('li').getAttributeNode('class').nodeValue); //li1
        //  文本节点类型：#text
        console.log(document.querySelector('ul').firstChild.nodeValue); //''
    </script>
</body>

</html>

5.节点之间的关系：

    父节点---parentNode
    父元素节点----parentElement
    子节点----childNodes   包括标签节点，文本节点，注释节点
    子元素节点----children  标签节点
    第一个子节点：firstChild 包括文本节点
    第一个子元素节点：firstElementChild  第一个标签
    最后一个子节点：lastChild 包括文本节点
    最后一个子元素节点：lastElementChild  最后一个标签
    上一个子节点：previousSibling   包括文本节点
    上一个子元素节点：previousElementSibling  上一个标签
    下一个子节点：nextSibling包括文本节点
    下一个子元素节点：nextElementSibling  下一个标签
    parentNode,childNodes，firstChild，lastChild，previousSibling,nextSibling获取到的都是一般都是文本，parentElement,children,fistElementChild,lastElementChild,previousElementSibling,nextElementSibling,获取的是标签节点
    childNodes 和 children 获取的是伪数组

<!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>
        <li class="li1">1111</li>
        <li>2222</li>
    </ul>
    <script>
        //节点的操作：节点直接的关系
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);   //NodeList(5) [text, li.li1, text, li, text]
        console.log(ul.children);   //HTMLCollection(2) [li.li1, li]
        console.log(ul.firstChild); //#text,文本对象
        console.log(ul.firstElementChild); // <li class="li1">1111</li>
        console.log(ul.lastChild); //#text,文本对象
        console.log(ul.lastElementChild); // <li class="li1">1111</li>
        console.log(document.querySelector('.li1').previousSibling); //#text,文本对象
        console.log(document.querySelector('.li1').previousElementSibling); // null
        console.log(document.querySelector('.li1').nextSibling); //#text,文本对象
        console.log(document.querySelector('.li1').nextElementSibling); // <li class="li1">1111</li>
    </script>
</body>

</html>

6.插入节点：insertBefore()方法可以在已有的子节点前插入一个新的子节点：
用法：node.insertBefore(newnode,existingnode)参数，newnode是要插入的子节点对象，existingnode是要添加新的节点前的子节点

<body>
    <!-- 插入节点：insertBefore() -->
    <!-- node.inserBefore(newnode,existingnode)参数，newnode是要插入的子节点对象，
        existingnode是要在哪里插入的新的子节点 -->
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <ul>
        <li>666</li>
    </ul>
    <script>
        var ul = document.querySelectorAll('ul');
        console.log(ul[1]);
        // console.log(ul[1].firstElementChild);
        ul[0].insertBefore(ul[1].firstElementChild, ul[0].lastChild)
    </script>
</body>

</html>

7.鼠标事件：鼠标移入 onmouseover 鼠标移除 onmouseout 鼠标进入 onmouseenter 鼠标离开

<body>
    <!-- 鼠标事件：鼠标移入 onmouseover 鼠标移除  onmouseout   鼠标进入  onmouseenter  鼠标离开 onmouseleave -->
    <!-- 两者区别1:onmouseover 和 onmouseout 强调的是移入和移除，而鼠标进入和离开强调的是进入与离开的这个动作
        区别2：onmouseover 和 onmouseout 支持冒泡，onmouseenter和onmouseleave不支持冒泡 -->

    <div class="div1">
        <div class="div2"></div>
    </div>
    <script>
        var div1 = document.querySelector('.div1');
        var div2 = document.querySelector('.div2');
        div1.onmouseover = function() {
            console.log(111); //111
        }
        div2.onmouseover = function() {
            console.log(222); //222  111
        }

        // div1.onmouseenter = function() {
        //     console.log(111); //111
        // }
        // div2.onmouseenter = function() {
        //     console.log(222); //111  222
        // }
    </script>
</body>

定时器：setInteval() 和 setTimeout()
setInterval（）是可以每隔一段时间就可以重复调用参数1里面的函数，而setTimeout是只能调用一次
js中的同步和异步，js是单线程，同步就是单线程的顺序进行，一件事做完再去做下一件事，就比如烧水-洗头-做饭的过程，同步就是先去烧水，烧好水之后再去洗头，洗完头之后再去做饭。
而异步就是，一边做这个事一边再去做别的事，不按照顺序执行了。
JS中的异步操作：
1、定时器都是异步操作
2、事件绑定都是异步操作
在这里区别一下异步和多线程的区别，异步不按照原来的顺序执行，而多线程还是按照原来的顺序执行，只不过线程多了。

异步操作的优缺点：因为异步操作无须额外的线程负担，并且使用回调的方式进行处理，在设计良好的情况下，处理函数可以不必使用共享变量（即使无法完全不用，最起码可以减少共享变量的数量），减少了死锁的可能。当然异步操作也并非完美无暇。编写异步操作的复杂程度较高，程序主要使用回调方式进行处理，与普通人的思维方式有些初入，而且难以调试。

多线程的优缺点：多线程的优点很明显，线程中的处理程序依然是顺序执行，符合普通人的思维习惯，所以编程简单。但是多线程的缺点也同样明显，线程的使用（滥用）会给系统带来上下文切换的额外负担。并且线程间的共享变量可能造成死锁的出现。

A &......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-api操作dom元素03----元素的属性操作以及节点操作

1.文本内容属性： 1.1 innerText和textContect的区别 innerText和textContect的区别不大，作用都是可以解析文本，但是textContect在ie8及以下中存在兼容性问题； 1.2 innerText和innerHTML的区别： innerText主要是设置文本的，设置标签内容，是没有标签效果的； innerHTML是可以设置文本内容，可以解析富文本，带有标签和属性的文本；2.元素的属性操作： 2.1 获取属性：getArrt
复制链接

扫一扫

专栏目录