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

什么是DOM

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

他是：

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

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

DOM节点

子节点

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

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

示例：

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

父节点

• parentNode

首尾子节点

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

兄弟节点

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

添加元素

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

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

示例：点击一次按钮，添加一个li标签

    
    
    


    
    
    

        
hello
    

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

    
    
    


    
    
    

        
hello
    

删除元素

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

示例：点击删除，删除某个元素

    
    
    
    


    
    

    

        
hello删除
        
123删除
        
234删除
        
hel234lo删除