JS--DOM节点对象，获取节点，节点属性，操作Dom节点，获取元素的偏移量，获取元素尺寸及综合练习

从DOM的角度去理解，整个html文档被称为对象（document对象）。文档中每个标签元素，以及元素的内容，属性，样式都是节点对象

 

节点分类:

1. 元素节点（html元素）
2. 文本节点（元素内容）
3. 属性节点（html的属性）
4. 文档节点（document）
5. 根节点（）
6. 注释节点 

---

HTML的文档结构：树形结构；节点关系：父子关系   兄弟关系

 

获取节点对象

• getElement系列--- getelementById(),获取元素节点
• querySelector系列---ele.innerHTML
• 层次关系获取节点

                     

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

    


        
hello

    
    

 

•  层次关系获取元素节点

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementsibling	下一个节点
previousElementSibling	上一个节点

• 获取元素节点的所有属性节点: attributes

•         
  
              
  hello
    
          
  

  

这里li有三个属性，id/a/test三个，所以获取到了三个

元素2 

元素3 

元素4 

 元素与元素之间存在元素节点

案例：点击购物车的+号，使数量增加，并计算出总价

    点击加号，数量加一，计算该商品总价，显示到总价栏

              分析:

                 1. 给加号绑定点击事件

                 2. 改变数量

                 3. 获取单价 * 数量  

html:

        



            
商品图片
            
商品信息
            
单价
            
数量
            
总价
            
操作
        

        

            

            
            
javascript高级编程
            
￥34.32
            
 
            
￥0
            
移入收藏
                
删除
            

        

        

            

            
java从入门到精通
            
￥24.54
            
 
            
￥0
            
移入收藏
                
删除
            

        
    

 

JS部分：

 function onplus() {
            var plusEles = document.querySelectorAll('input[name="plus"]')  //获取到+号所在的input
            for (var i = 0; i < plusEles.length; i++) {//循环的目的，拿到单个的加号
                var plusEle = plusEles[i]  //获得加号节点对象
                //给加号绑定事件
                plusEle.onclick = function () {
                    //this关键字表当前点击的对象
                    var amountEle = this.previousElementSibling
                    amountEle.value++
                    //获取单价
                    var priceEle = this.parentElement.previousElementSibling //获取单价的单元格
                    var price = priceEle.innerHTML//获取单价金额
                    price = price.substring(1) //￥34.42 去掉￥
                    //计算价格
                    var totalPrice = price * amountEle.value
                    this.parentElement.nextElementSibling.innerHTML = `￥${totalPrice.toFixed(2)}`
                }
            }
        }
        onplus()

 

非常规节点获取：

获取html根节点：document.documentElement

获取body节点：document.body

获取head：document.head

 节点属性：

-	nodeType	nodeName	nodeValue
元素节点	1	标签名大写	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

元素一
    

 创建了一个节点，你需要添加内容才会显示该结点

如何在创建的结点中编写内容？这里介绍两种方式

 

添加Dom节点

• 父节点.appendChild(子节点) 添加
• 父节点 .insertBefore(新节点，原子节点)插入

var divEle = document.querySelector('.root')
            // divEle.appendChild(pEle)
            var oldPEle = divEle.firstElementChild
            divEle.insertBefore(pEle,oldPEle)

 

删除Dom节点

• 父节点.removeChild（子节点）
• 节点.remove（）

        function test2(){
              var divEle = document.querySelector('.root')
              var oldPEle = divEle.firstElementChild
              // divEle.removeChild(oldPEle)
              oldPEle.remove()
          }
          
          // 删除节点
          var removeBtn = document.querySelector('.removeBtn')
          removeBtn.onclick = function(){
              test2()
          }

替换Dom节点

• 父节点.replaceChild(新节点，原节点)

   var replaceBtn = document.querySelector('.replaceBtn')
          replaceBtn.onclick = function(){
              var h2Ele = document.createElement('h2')
              h2Ele.innerHTML = '标题'  //
  标题
  
              var divEle = document.querySelector('.root')
              var pEle = document.querySelector('.root>p')
  
              divEle.replaceChild(h2Ele,pEle)
          }

克隆节点

• 节点.cloneNoede()   false  |  true
• ==>返回克隆的新节点

        // 克隆节点
          var cloneBtn = document.querySelector('.cloneBtn')
          cloneBtn.onclick = function(){
              var divEle = document.querySelector('.root')
              var newDivEle = divEle.cloneNode(true)
              // 添加body下
              document.body.appendChild(newDivEle)
          }
  

  ​​​​​​​

  ---

获取元素偏移量：

就是元素在页面上的什么位置
我们有几个属性来获取，offsetLeft 和 offsetTop ， offsetWidth 和 offsetHeight

offsetLeft 和 offsetTop：左边和上边的偏移量，没有定位的情况下，获取元素边框外侧到页面内侧的距离，有定位的情况下是获取元素边框外侧到定位父级边框内侧的距离

offsetWidth 和 offsetHeight：获取元素内容宽高+padding宽高+border宽度的和

---

元素尺寸：

offsetWidth = 内容width + padding + border
clientWidth = 内容width + padding
window.getComputedStyle(divEle).width =  内容width

操作数据综合练习：

	
		
		
		
		
	
	
		

			确定