原生js学习笔记4——DOM操作

什么是DOM

DOM:Document Object Model,文档对象模型,把整个文档当成一个一个的节点对象。

他是:

  1. js的组成部分
  2. 一套标准,目前有DOM1和DOM2这两种标准

我们可以使用DOM操作来操作页面中的元素。

DOM节点

子节点

  • childNode:返回值一个数组,放的是父节点中所有的子节点
  • nodeType:返回值是一个数组,1表示元素节点,3表示文本节点

在某些浏览器中,如火狐,使用childNode获取所有元素节点时会把空格等一起或取出来,此时就需要使用nodeType来判断。

示例:




    
    Document
    


    
  • childern: 取子节点,与childNode相比,chlidren不会把非标签元素解析出来,不用担心兼容性问题

父节点

  • parentNode

首尾子节点

IE下的语法 火狐下的语法 含义
firstChild firstElementChild
lastChild lastElementChild

兄弟节点

IE下的语法 火狐下的语法 含义
nextSibling nextElementSibling 下一个
previousSilbing previousElementSibling 上一个

添加元素

createElement(元素名):创建一个元素

父元素.appendChild(子元素)将子元素添加进父元素中(添加在最后边)

示例:点击一次按钮,添加一个li标签





    
    Document
    


    
    
    
  • hello

父元素.insertBefore(子元素,在谁之前插入),在谁之前插入子元素




    
    Document
    


    
    
    
  • hello

删除元素

父元素.removeChild(要删除的元素):删除父元素中的某个子元素

示例:点击删除,删除某个元素




    
    Document
    
    


    
    

    


你可能感兴趣的:(原生js学习笔记4——DOM操作)