qteewidgetitem添加子节点_学习笔记：DOM节点的操作

知识总结：余翔、纳翔、张文静

 DOM节点的操作

目录：(1)节点的详细解释

(2)结点的遍历

(3)节点的操作(创建，添加，删除，替换，克隆)

(4)具体操作留言板

一．什么是节点

1.1解释

在整个HTML文件，其中所有的内容，都视为HTML文件的一个节点对象，可以通过操作节点    对象，来操作HTML文件。

1.     起始节点操作，就是另一种DOM操作，也是获取对象、操作对象，但节点操作比DOM操                           作更加复杂，更加丰富

2.     与DOM的操作区别：DOM操作只能获取标签对象，节点操作能获取标签对象、内容对象、属性对象、注释内容

3.     特点：

A.   在复制标签会用克隆方法，而写入标签时会使用节点操作

B.   不管是DOM方式，还是节点方式 获取的对象、内容可能不同，形式是完全一致的

C.   DOM方式，获取的标签对象，支持节点操作；节点方式 获取的节点对象，支持DOM操作

D.   只要正确的获取对象，之后想怎么操作，就怎么操作

1.2节点的类型

1.元素节点(标签)div p

2.属性节点 (标签的属性) src alt

3.文本节点空格、文本(文字)

4.注释节点(文档中的注释)

5.文档节点 document(整个页面)

1.3节点的关系

节点关系：

兄弟关系(在同一个标签下的两个同级节点，并列的关系 下图的span和a)

<div>

        <span>span>

        <a href="">a>

    div>

父子关系(一个节点嵌套另一个节点，他们就是父子关系,下图的div和span)

      <div>

           <span>span>

       div>

祖先关系(自身嵌套的子节点中再嵌套一个节点，他们的关系就是祖先关系，下图的div和li)

<div>

        <ul>

            <li>li>

        ul>

    div>

注：“所有的元素都是节点，但是节点并不都是元素节点，除了元素节点还有‘文本节点’、‘属性节点’、‘文档节点’、‘注释节点’，我们操作节点大部分是操作元素节点”

获取节点的方法

  1.获取元素节点

1.document.getElementById(‘id名’)根据id名返回第一个元素对象

2.document.getElementsByTagName('标签名')根据标签名返回元素对象集合 类数组-遍历 length

3.document.getElementByClassName('类名')根据类名返回对象集合 类数组-遍历 length

4.document.queruySelector('选择器')根据选择器返回第一个元素对象

5.document.querySelectorAll(''选择器)根据选择器返回元素对象集合

6.获取指定元素document.body (返回html dom中的body节点 即)document.documentElement(返回html dom中的root 节点 即)

        2.获取属性节点

    a.元素.attributes 获取元素身上所有属性构成的集合

b.元素.setAttribute(“属性名”，“属性值”)给元素设置属性和属性值

c.元素.getAttribute(“属性值”)获取属性值的方法

d.元素.removerAttribute(“属性”)删除属性

       3.文本节点没有获取的方法，没有意义

     节点操作的类型，名称，内容

1、节点的类型: 对象.nodeType 属性中存储,数据是 一个数值
　　      元素节点/标签节点 : 1
　       　属性节点 : 2
　       　文本节点 : 3
　　       注释节点 : 8
        2、节点的名称: 对象.nodeName
　　      元素节点/标签节点 : 大写字母的 标签名称 
　      　属性节点 : 小写字母的 属性名称
　      　文本节点 : #text
      　　注释节点 : #comment
        3、节点的内容: 对象.nodeValue
　      　元素节点/标签节点 : null
　      　属性节点 : 属性的属性值
　　      文本节点 : 文本内容,包括换行和空格
          注释节点 : 注释内容,包括换行和空格

二．节点元素遍历

  2.1节点的遍历

1.firstChild 第一个子节点

2.lastChild 最后一个子节点

3.nextSibling 下一个兄弟节点

4.previousSibling上一个兄弟节点

5.parentNode 父节点

6.childNodes 所有子节点，结果以集合形式返回

2.2元素的遍历

1.children,所有的子节点

2.firstElementClhlid第一个子元素

3.lastElementChild最后一个子元素

4.previousElementSibling上一个兄弟元素

5.nextElementSibling下一个兄弟元素

6.parentElement父元素

7.childElementCount子元素的数量

三．节点的具体操作

注:“A:通过节点操作获取对象/伪数组与通过DOM操作的对象/伪数组,形式上是一致的，可以互相操作

B:执行结果上，有的伪数组可以forEach循环，有的不能进行forEach循环”

   3.1节点的创建

1.     创建元素节点 document.createElement(‘标签名’)最常用

var oLI=document.createElement('li')

2.     创建文本节点

(1)元素对象.innerHTml=’文本’

oLi.innerHTML='你好欢迎来到北昌大家庭'

(2)document.createTextNode('文本')通过节点添加的方法添加到元素中

document.createTextNode('你好欢迎来到北昌大家庭')

3.     创建属性节点

(1)元素对象.属性名=属性值oLI.class='list'oImg.src=''

oLI.className='list'

(2)元素对象.setAttribute(属性名，属性值)

oLI.setAttribute('background','#ccc')

(3)var attr=document.createAttribute('属性名')设置属性的值attr.nodeValue="class='list'sagbcf"

 var att=document.createAttribute('class')

att.nodeValue='list'

 oLI.setAttributeNode(att)

          4.创建注释节点

               document.createComment('注释的内容')

   3.2 节点的添加

      1.末尾添加父元素.appendChild(要添加的子元素)

oTbody.appendChild(oTr)

2. 在某个元素之前插入 父元素.inesertBefore(要添加的元素，添加到那个元素之前)

 oUl.insertBefore(oLI,oUl.firstElementChild)

   3.3 节点的删除

      1.父元素.removeChild(子元素)

 oUl.removeChild(oLI)

3. 要删除的元素.remove()

this.parentElement.parentElement.remove()//this(当前)

注意：remove()会把当前元素删除

      3.4 节点的替换

      1.父节点.replaceChild(新节点，替换的节点)

ul.replaceChild(oLi,ul.firstElementChild)

   3.5 节点的克隆

      要克隆的节点.cloneNode(参数)

与添加和替换不一样，添加和替换会操作页面的元素，克隆仅仅是复制，还得进行后续的操作，比如添加、替换

无参数，只克隆当前元素-有参数-true，克隆当前元素以及所有的后代元素

     var newli=ul.cloneNode(true)

     document.body.appendChild(newli)

     var newli2=ul.cloneNode()

     newli2.innerHTML='你好欢迎来到北昌大家庭'

     document.body.appendChild(newli2)

     document.createTextNode('你好欢迎来到北昌大家庭')

四．留言板

(这是模拟百度贴吧做的一个留言板，发表回复之前是静态页面，不过多赘述，主要讲解一下下面的留言功能)

(非空判断，昵称和留言内容不能为空，否则无法发表)

 //这里写个判断判断昵称输入框和文本输入框内容是否为空并同时去掉空格

             if(names.value.trim()===''||text.value.trim()===''){

                 //获取的一个文字标签内容提示用户填写完整

               ostr.innerHTML='请填写完整！'

               //如果为空无法发表，终止代码的运行

                 return

             }

(如果用户填写了完整信息，则可以发表，发表的用户不仅包括客户自己填写的，还包括用户录入成功的时间(里面是一个时间函数)

 //在上面非空判断之后，创建一个标签

             var oli=document.createElement('li')

             //给这个标签设置内容(样式已经在前面css设置好)

             //里面有用户输入昵称内容和文本内容

             oli.innerHTML=`

                    

                    ${names.value}

                   ${text.value}

                    ${num} 楼  ${yxtime()}  删除

                //设置好样式的标签添加在他的父标签里面第一个位置

                oUl.insertBefore(oli,oUl.firstElementChild)

(删除功能，点击右下角删除可以删除这条内容，并进行楼层更新,提示删除成功)

//在这里添加成功一次调用一次楼层更新

                var del=document.querySelectorAll('.time span')

                for(var i=0;i<del.length;i++){

                    del[i].onclick=function(){

                        this.parentElement.parentElement.remove()

                        //删除操作并且提示删除成功

                        oB.innerHTML='删除成功'

                        yxfloor()

                        //在这里删除成功一次调用一次楼层更新

                    }

                }

function yxfloor() {

            // 楼层更新函数

            var floor = document.querySelectorAll('.time i');

            for (var i = 0; i floor.length; i++) {

                floor[i].innerHTML = floor.length - i+'楼';

            }

        }

   总结中难免出现问题，欢迎大家给与指正！