JavaScript基础——DOM节点操作学习笔记

目录

笔记 

方法的使用

案例一、 动态生成表格

案例二、下拉菜单,鼠标经过和离开实现

案例全部代码


 

笔记 

 ###节点概述
    1.网页中的任何内容都是节点——文字、标签、元素、文档等。
    节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)三个基本属性
    节点的类型nodeType
        元素节点:1 ———主要操作
        属性节点:2
        文本节点:3
    2.节点的层级关系
        父子兄
        父节点:
            parentNode  得到的是最近的一个父节点 
            父节点使用:
                element.parentNode  返回的是父节点
        子节点:
            childNode  得到的是所有的子节点(包括文本等)
            children  得到的是所有子元素节点(不包括文本等)——常用
            firstChildren lastChildren 得到的是第一个/最后一个子节点(包括文本等)
            firstElementChildren lastElementChildren 得到的是第一个/最后一个子元素节点(不包括文本等)
            子节点的使用:
                element.children  返回的是所有子元素节点
            实例:实现下拉菜单——使用节点获取元素操作更方便
        兄弟节点:
                nextSibling:得到的是下一个子节点(包括文本等)
                previousSibling:得到的是上一个子节点(包括文本等)
                nextElementSibling:得到的是下一个子元素节点(不包括文本等)
                previousElementSibling:得到的是上一个子元素节点(不包括文本等)
    3.第一个子元素和最后一个子元素的获取:
    ele.children[0] ———— 第一个子元素节点
    ele.children[ele.children.length - 1] ———— 最后一个子元素节点

###节点的创建、添加、移除、复制
    创建节点:
        节点是文档创建,创建后一般是要添加到知道地方的
        document.createElement('TagName')方法  动态创建元素节点
            比如:document.createElement('li')
    添加节点:
        node.appendChild(child) 方法 
            在node父节点列表的末尾添加child子节点  
            比如:ul.appendChild(li) 在ul的子元素列表末尾添加元素节点
        node.insertBefore(child,指定元素)方法
            在指定元素节点的前面添加子节点元素  
            比如:ul.insertBefore(li,ul.children[0]) 在ul的第一个子元素节点前面添加元素节点
    删除节点:
        node.removeChild(child)方法 
            在node父节点列表删除child子节点
    复制节点:
        node.cloneChild([child])方法
            无参数:浅拷贝 —— 只复制标签 不复制内容
            有参数child:深拷贝 —— 标签和标签里的所有内容都复制

方法的使用





    
    
    节点创建、添加、删除、复制
    



    
  • 1
  • 2
  • 3
  • 4

 

案例一、 动态生成表格

在实际中,表格中的数据是从数据库中取得,这里我是用对象模拟得数据。

图中得列表中的行,都是自动生成的

JavaScript基础——DOM节点操作学习笔记_第1张图片

 点击按钮可以删除行:

JavaScript基础——DOM节点操作学习笔记_第2张图片

JS部分:

    

 

 

案例二、下拉菜单,鼠标经过和离开实现

JavaScript基础——DOM节点操作学习笔记_第3张图片

    

 

案例全部代码





    
    
    下拉菜单
    



    
    






    
    
    Document
    



    
姓名 科目 成绩 操作




    
    
    节点创建、添加、删除、复制
    



    
  • 1
  • 2
  • 3
  • 4

 

 

你可能感兴趣的:(#,Javascript基础,dom,javascript)