前端学习（六十七） Dom-节点操作（Dom）

获取节点

大致有这么几种：getElementById，getElementsByTagName，getElementsByClassName，querySelector，queSelectorAll

getElementById

通过ID获取节点，方法是：element = doucumet.getElementById(id)

例如：var a = document.getElementById('count')

getElementsByTagName

通过元素获取节点，返回的是数组，要对节点元素进行操作，记得要指定是数组中的哪一个元素，例如所有的li，img等

方法是：element = document.getElementsByTagName(tagName)

另外一种方法是：elements = rootElement.getElementsByTagName(tagName)

例如：var a = document.getElementById('li')，获取页面上所有的li元素

另外，示例：

var a = document.getElementById('users');

var b=a.getElementBuTagName("*") // *,通配符，代表匹配了a下面所有的元素，并返回一个数组，如果要对某个节点元素进行操作，必须要注意返回的是数组，要进行b[0]类似的选择

getElementsByClassName

通过类名获取节点，返回的也是数组，要对节点元素进行操作，记得要指定是返回数组中的哪一个元素

同样是两种方法：element = dcoument.getElementsByClassName(names)

另外一种:element = rootElement.getElementsByClassName(names);

示例：

var user = document.getElementsByClassName('user')

另外，类名是可以传多个的，例如：var user = document.getElementsByClassName('last user') //类名的顺序和html中的顺序无关

querySelector

使用css选择器来选择文档中节点，返回的是文档中一个符合条件的节点

方法是：element = document.querySelector(selectors)

另外一种是：element = baseElement.querySelector(selectors)

示例：

var a=document.querySelector('.user.last')

var b=document.querySelector("#users")

querySelectorAll

使用css选择器来选择文档中的节点，返回的是文档中所有符合条件的节点组成的数组

方法是：element = document.querySelectorAll(selectors)

另外一种是：element = baseElement.querySelectorAll(selectors)

示例：

var a=document.querySelectorAll('.user.last')

var b=document.querySelectorAll("#users")

那么getElementsById，getElementsByClassName这种获取到的和querySelector，querySelectorAll这种获取到的有什么区别呢？

区别在于：通过getElementsById这种类似的方式获取到的节点是实时变化的，是活的节点，对它的操作是会影响到后来的获取操作的

例如：

            var c=document.getElementsByClassName('user')
            console.log(c.length);    //3
            var f=document.getElementById('aaa');
            f.parentNode.removeChild(f); //f.parentNode，节点选择器，返回父级节点，然后通过removeChild(),删除指定子节点
            console.log(c.length);    //2

而用querySelectorAll这种获取的节点是死的，固定的，是不会影响到后来对节点的操作

            var c=document.querySelectorAll('user')
            console.log(c.length);    //3
            var f=document.getElementById('aaa');
            f.parentNode.removeChild(f); //f.parentNode，节点选择器，返回父级节点，然后通过removeChild(),删除指定子节点
            console.log(c.length);    //3

创建节点

element = document.creatElement(tagName)

            //创建li
            var li=document.createElement('li');
            //创建img
            var img=document.createElement('img');
            //创建a
            var a=document.createElement('a');

另外可以通过innerHTML创建

例如：

            //创建li
            var li=document.createElement('li');

            li.innerHTML='<a href="123">9asd1213</a>';

innerHtml的问题

内存泄漏（IE低版本）

安全问题

更新节点

textContent属性，可以设置内容（IE9之前不支持的）

设置a节点内容

            //创建a
            var a=document.createElement('a');
            a.textContent='aaa'

innerText属性，设置内容（兼容IE9以前）

            //创建a
            var a=document.createElement('a');
            a.innerText='aaa'

innerText和textContent区别

textContent会显示<script><style>中的内容，innerText则不会
textContent会保留空行，空格，换行，innerText则只会保留换行符
textContent会返回隐藏的元素，innerText则会对隐藏元素有感知，不会返回

插入节点

插入节点的方式有两种，appendChild和insertBefore

appendChild：将元素插入指定元素的最后面

var achild = element.appendChild(achild)； //参数就是子节点

            var aa=document.getElementById('users');
            //创建li
            var li1=document.createElement('li');
            aa.appendChild(li1) //将li加入users的最后一个

insertBefore：将元素插入指定元素的最前面

var ax=parentElement.insertBefore(newElement,referenceElement)

            var aa=document.getElementById('users');
            //创建li
            var li1=document.createElement('li');
            aa.appendChild(li1) //将li加入users的最后一个
            aa.insertBefore(li,aa.firstChild)    //将li加入users的第一个的元素的前面一个

思考联系insertAfter功能

删除节点

删除节点有两个方法：removeChild（删除）和replaceChild（严格的来说这个是替换一个节点）

removeChild

oldChild=node.removeChild(child)

            var aa=document.getElementById('users');
            var e1=document.querySelector('.user')

            aa.removeChild(e1)

replaceChild

replacedNode = parentNode.replaceChild(newChild,oldChild)

            //创建li
            var li=document.createElement('li');
            li.innerHTML='<a href="123">9asd1213</a>';

            var aa=document.getElementById('users');
            aa.replaceChild(li,aa.firstChild)
            var b2=a.getElementsByTagName('li');

前端学习（六十七） Dom-节点操作（Dom）

猜你喜欢