开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情

12、节点的复制

使用 cloneNode() 方法对节点进行复制时，它会复制节点的所有特点包括各种属性

这个方法默认只会复制当前节点，而不会复制节点的子节点

可以传递一个true作为参数，这样该方法也会将元素的子节点一起复制

在本案例中，像li是一个节点，里面的“孙悟空”是一个子节点，需要使用true来一块复制上

 <body>
     <button id="btn01">点我一下</button>
 
     <ul id="list1">
         <li id="l1">孙悟空</li>
         <li id="l2">猪八戒</li>
         <li id="l3">沙和尚</li>
     </ul>
     
     <ul id="list2">
         <li>蜘蛛精</li>
     </ul>
 
     <script>
         //点击按钮后，将id为l1 的元素添加到list2中
         const list2 = document.getElementById('list2')
         const l1 = document.getElementById('l1')
         const btn01 = document.getElementById("btn01")
 
         btn01.onclick = function(){
             const new1 = l1.cloneNode(true)//用来对节点进行复制
 
             new1.id = 'new1';
             list2.appendChild(new1)//将一元素添加到父节点的末尾
         }
     </script>
 </body>

13、直接修改css样式

修改样式的方式：元素.style.样式名 = 样式值

如果样式名中含有-，则需要将样式表修改为驼峰命名法

 <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>
         .box1 {
             width: 200px;
             height: 200px;
             background-color: #bfa;
         }
     </style>
 </head>
 <body>
     <button id="btn">点我一下</button>
     <hr>
     <div class="box1"></div>
 
     <script>
         //点击按钮后，修改box1的宽度
         const btn = document.getElementById('btn')
         const box1 = document.querySelector('.box1')
 
         btn.onclick = function(){
             //修改box1的样式
             //修改样式的方式：元素.style.样式名 = 样式值
             //如果样式名中含有-，则需要将样式表修改为驼峰命名法
             //background-color ---> backgroundColor
             box1.style.width = '400px'
             box1.style.height = '400px'
             box1.style.backgroundColor = 'yellow'
         }
     </script>
 </body>

14、读取css样式

getComputedStyle()

它会返回一个对象，这个对象中包含了当前元素所有的生效的样式
参数：
1. 要获取样式的对象
2. 要获取的伪元素
返回值：返回的一个对象，对象中存储了当前元素的样式
注意：样式对象中返回的样式值，不一定能来拿来直接计算所以使用时，一定要确保值是可以计算的才去计算

 <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>
         .box1 {
             width: 200px;
             background-color: #bfa;
         }
 
         .box1::before {
             content: 'hello';
             color:red
         }
     </style>
 </head>
 <body>
     <button id="btn">点我一下</button>
 
     <hr>
 
     <div class="box1"></div>
 
     <script>
         const btn = document.getElementById("btn")
         const box1 = document.querySelector(".box1")
 
         btn.onclick = function(){
             const styleObj = getComputedStyle(box1)
 
             console.log(styleObj.width)
             console.log(styleObj.left)
 
             console.log(parseInt(styleObj.width) + 100 + 'px')
             console.log(styleObj.backgroundColor)
 
             const beforeStyle = getComputedStyle(box1,'::before')
             console.log(beforeStyle.color)//返回的是rgb数值
 
             console.log(box1.firstElementChild)
         }
     </script>
 </body>

15、其他读取样式的方式

元素.clientHeight

元素.clientWidth

获取元素内部的宽度和高度（包括内容区和内边距）

元素.offsetHeight

元素.offsetWidth

获取元素的可见框的大小（包括内容区、内边距和边框）

元素.scrollHeight

元素.scrollWidth

 - 获取元素滚动区域的大小

元素.offsetParent

获取元素的定位父元素
定位父元素：离当前元素最近的开启了定位的祖先元素，如果所有的元素都没有开启定位则返回body

元素.offsetTop

元素.offsetLeft

- 获取元素相对于其定位父元素的偏移量

元素.scrollTop

元素.scrollLeft

- 获取或设置元素滚动条的偏移量

     <style>
         #box1 {
             width: 200px;
             height: 200px;
             padding: 50px;
             margin: 50px;
             border: 10px red solid;
             background-color: #bfa;
             overflow: auto;
         }
 
         #box2 {
             width: 100px;
             height: 500px;
             background-color: orange;
         }
     </style>
 </head>
 <body>
     <button id="btn">点我一下</button>
     <hr>
     <div>
         <div id="box1">
             <div id="box2"></div>
         </div>
     </div>
 
     <script>
         const btn = document.getElementById('btn')
         const box1 = document.getElementById('box1')
 
         btn.onclick = function(){
             console.log(box1.scrollHeight)
             console.log(box1.scrollWidth)
 
             console.log(box1.offsetParent)
 
             console.log(box1.offsetLeft)
             console.log(box1.offsetTop)
 
             console.log(box1.scrollTop)
         }
     </script>
 </body>

【JavaScript】27_DOM编程：节点的复制，直接修改+读取css样式