Web APIs——节点操作

1、DOM节点

DOM节点：DOM树里每一个内容都称之为节点

节点类型：

• 元素节点
  • 所有的标签 比如body、div
• 属性节点
  • 所有的属性 比如 href
• 文本节点
  • 所有的文本
• 其他

2、查找节点

关闭二维码案例：

点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

思考：

• 关闭按钮 和 erweima 是什么关系呢？
• 父子关系
• 所以，可以点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了

节点关系：针对的找亲戚返回的都是对象

• 父节点
• 子节点
• 兄弟节点

2.1 父节点查找

parentNode属性

返回最近一级的父节点 找不到返回为null

子元素.parentNode

    

        

            
x
        
    
    

2.1.1 案例 关闭二维码案例 

  
  
  
  
  



  

    我是广告
    
X
  
  

    我是广告
    
X
  
  

    我是广告
    
X
  
  

2.2 子节点查找 

• childNodes
  • 获得所有子节点、包括文本节点（空格、换行）、注释节点等
• children属性（重点）
  • 仅获取所有元素节点
  • 返回的还是一个伪数组
• 父元素.children

    

        
第一个段落
        
1
        
2
        
3
        
4
        
5
    
    

2.3 兄弟节点的查找 

1.下一个兄弟节点

        nextElementSibling属性

2.上一个兄弟节点

        previousElementSibling属性

    

        
1
        
2
        
3
        
4
        
5
    
    

3、增加节点

很多情况下，需要在页面中增加元素

        比如，点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作：

• 创建一个新的节点
• 把创建的节点放入到指定的元素内部

特殊情况下，我们新增节点，按照如下操作：

• 复制一个原有的节点
• 把复制的节点放入到指定的元素内部

3.1 创建节点

即创造出一个新的网页元素，在添加到网页内，一般先创建节点，然后插入节点

创建元素节点方法：

3.2 追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素：

    
我是老大
    

插入到父元素中某个子元素的前面：

    

        
我是老大
    
    

3.3 练习学车在线案例渲染 

分析：

①：准备好空的ul结构

②：根据数据的个数，创建一个新的空li

③：li里面添加内容img标题等

④：追加给ul

    
    
    
    
    
    




    
    

        

            
精品推荐
            查看全部
        
        

            


            
        
    
    

 3.4 克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

• 若为true，则代表克隆时会包含后代节点一起克隆
• 若为false，则代表克隆时不包含后代节点
• 默认为false

    

        
1
        
2
        
3
    
    

4、删除节点

若一个节点在页面中已不需要时，可以删除它

在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

语法：

注：

• 如不存在父子关系则删除不成功
• 删除节点和隐藏节点（display：none）有区别：隐藏节点还是存在的，但是删除，则从html中删除节点