JavaScript Dom节点操作 笔记（1）

目录

节点的获取方式

获取子节点

获取父节点结

获取兄弟节点

获取第一个子节点

获取最后一个节点

创建一个节点

添加一个节点

删除一个节点

替换一个节点

克隆一个节点

---

Dom全称：Document  Object  Model（文档对象模型）

节点的获取方式

1.通过id名获取节点

        document.getElementById（'Id名'）

2.通过标签名来获取节点

        document.getElementsByTagName（'标签名'）

3.通过class名获取节点

        document.getElementsByClassName（'class名'）

4.通过选择器来获取节点

        document.querySelector（'节点名'）        

        document.querySelectorAll（'节点名'）

获取子节点

        childNodes ：获取的是所有类型的节点

        children：获取的元素节点是第一层的所有元素节点

获取父节点结

        parentNode：获取的是当前元素节点的父亲节点

获取兄弟节点

        previousElementSibling

                获取的是上一个兄弟节点，但是不兼容低版本的浏览器

        nextElementSibling

                获取的是下一个兄弟节点，也不兼容低版本的浏览器

获取第一个子节点

        firstElementChild

                获取的是第一个子节点，不兼容低版本的浏览器

                父元素.children【0】 父元素下面的第一个节点，常用这样

获取最后一个节点

        lastElementChild

                获取的是最后一个节点，不兼容低版本的浏览器

                父元素.children【父级.children.length-1】

                获取的是当前父元素的最后一个节点，

创建一个节点

eg：var 节点名字 = document.creatElemnet（'标签名'）

        创建的条件：

                1. 必须是document才能创建

                2. 必须插入或者放到Body的某个地方才能使用

                3. 没有属性，没有内容

添加一个节点

        添加一个节点的方式

        1. 父节点的名字.innerHTML = '添加的节点名字'

                相当于把父级的元素全部覆盖

        2. 父节点的名字.appendChild（子节点的名字） //括号里面没有引号

                作用是在父节点的末尾最加一个新的元素节点

        3. 父节点名字.insetBefore（新节点名字， 插入到谁的前面的节点名字）

                如果插入的节点以及存在，那么会将节点进行剪切并移到插入的地方，相当于移动的作用

删除一个节点

        eg:父节点的名字.removeChild（'需要删除子节点的名字'）

        删除节点不能删除一组节点，只能删除一个节点，不能对一组节点进行操作

替换一个节点

        eg:父节点的名字.replaceChild（'需要替换字节点的名字'）

        不能替换创建插入的字节点

克隆一个节点

        1. 克隆节点的名字.cloneNode（ ）；

        表示只克隆当前的节点元素，里面的内容不进行克隆，并且添加到父节点里的子节点的最后面

        2. 克隆节点的名字.cloneNode（true）；

        括号里写true，这样克隆会把克隆节点里的所有子节点全部克隆，