欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
1.DOM节点介绍
 
1.什么是节点
 
在HTML文档中,一切都是节点(HTML文档本身、标签、属性、注释内容、文本)
 
2.什么是元素
 
元素在HTML中叫做标签,在JS的DOM对象中称为元素(可以理解为标签的面向对象的叫法)
 
3.HTML标签属于节点的一种,叫做元素节点
 
4.节点三要素
 
节点类型:标签、属性、注释、文本
 
节点名称:p、div、class(标签名)
 
节点的值:one(属性的值)
 
  /* 
 
        1.网页内容是由标签组成   :  不严谨的
 
        2.网页内容由  节点组成 : 一切内容皆节点
 
            元素(标签)节点 : 例如 div标签
 
            属性节点 : 例如 class属性
 
            文本节点 : 比如标签里面的文字
 
            注释节点 : 比如HTML中的注释
 
        3.DOM节点操作重点记住: 元素节点
 
        */
 
2.查询节点方法
 
1.查询子元素节点:父元素.children
 
2.查询兄弟元素节点:
 
上一个兄弟元素:元素.previousElementSibling
 
下一个兄弟元素:元素.nextElementSibling
 
3.查询父节点:元素.parentNode
 
3.节点操作
 
1.新增节点:document.createElement()
 
 (1)内存 创建空标签 : let li =  document.createElement('标签名')
 
            (2)设置内容   :  li.innerText = '文本'
 
            (3)添加到dom树 :  父元素.appendChild( 子元素 )
 
新增到最后面     :  父元素.appendChild(子元素)
 
新增到某个元素前面:  父元素.insertBefore(子元素,要加到哪个元素前面)
 
2.克隆节点:
 
       克隆元素自己      : 元素.cloneNode(false)
 
       克隆元素自己+后代  :元素.cloneNode(true)
 
3.删除节点:父元素.removeChild( 子元素 )
 
注意点: 元素只能移除自己的子元素
 
4.insertBefore实现上移与下移
 
<body>
 
    <button class="btn1">新增元素到最后面</button>
 
    <button class="btn2">新增元素到li2前面</button>
 
    <button class="btn3">新增元素到最前面</button>
 
    <button class="btn4">li2上移</button>
 
    <button class="btn5">li2下移</button>
 
    <ul>
 
        <li>我是班长1</li>
 
        <li id="li2">我是班长2</li>
 
        <li>我是班长3</li>
 
        <li>我是班长4</li>
 
        <li>我是班长5</li>
 
    </ul>
 
<script>
 
        /* 新增元素
 
           1.只能新增到最后面   :    父元素.appendChild( 子元素 )
 
           2.新增到指定元素的前面:   父元素.insertBefore( 子元素,要新增到哪个元素前面 )
 
         */
 
        let ul = document.querySelector('ul')//父元素
 
        let li2 = document.querySelector('#li2')//li2
 
        //新增元素到最后面
 
        document.querySelector('.btn1').onclick = function(){
 
            //新创建元素
 
            let newLi = document.createElement('li')
 
            newLi.innerText = '我是新来的1'
 
            //新增到最后面
 
            ul.appendChild(newLi)
 
        }
 
        //新增元素到li2前面
 
        document.querySelector('.btn2').onclick = function(){
 
            //新创建元素
 
            let newLi = document.createElement('li')
 
            newLi.innerText = '我是新来的2'
 
            //新增到li2前面 
 
            ul.insertBefore( newLi,li2 )
 
        }
 
        //新增父元素到最前面
 
        document.querySelector('.btn3').onclick = function(){
 
            //新创建元素
 
            let newLi = document.createElement('li')
 
            newLi.innerText = '我是新来的3'
 
            //新增最前面 :  新增到原来的第一个元素的前面 
 
            ul.insertBefore( newLi, ul.children[0] )
 
        }
 
        //li2上移
 
        document.querySelector('.btn4').onclick = function(){
 
            /* 上移思路: 元素移动到它哥哥的前面 */
 
            //判断li2是不是第一个元素,如果是则不能移动
 
            if( li2.previousElementSibling ){
 
                ul.insertBefore( li2, li2.previousElementSibling )
 
            }else{
 
                alert('已经是第一个元素')
 
            }
 
        }
 
        //li2下移
 
        document.querySelector('.btn5').onclick = function(){
 
            /* 下移思路: 元素 移到弟弟的弟弟的前面
 
            弟弟的后面 = 弟弟的弟弟的前面
 
            */
 
            if( li2.nextElementSibling ){
 
                ul.insertBefore(li2, li2.nextElementSibling.nextElementSibling )
 
            }else{
 
                alert('已经是最后一个元素')
 
            }
 
        }
 
    </script>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64221.shtml