JavaScript学习笔记之DOM基础操作实例小结

本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考,具体如下:

一、子节点

1、元素节点、文本节点

实例01

html


 
文本节点1 
  • 文本节点2
  • 文本节点3
  • 文本节点4
  • 文本节点5
  • 文本节点6

    javascript

    
    
    

    JavaScript学习笔记之DOM基础操作实例小结_第1张图片

    2、nodeType属性

    常见节点 nodeType值
    元素节点 1
    属性节点 2
    文本节点 3

    实例02

    
    
    

    JavaScript学习笔记之DOM基础操作实例小结_第2张图片

    3、children获取元素节点

    实例03

    html代码

    
     
  • 子节点
  • javascript代码

    
    
    

    二、父节点

    实例04

    html代码

    
    
    

    javascript代码

    
    
    

    JavaScript学习笔记之DOM基础操作实例小结_第3张图片

    实例05 父节点的应用

    html代码

    
     
  • 父节点1隐藏
  • 父节点2隐藏
  • 父节点3隐藏
  • 父节点4隐藏
  • 父节点5隐藏
  • 父节点6隐藏
  • 父节点7隐藏
  • javascript代码

    
    
    

    JavaScript学习笔记之DOM基础操作实例小结_第4张图片

    三、firstChild

    
    
    
     
     
     
    
    
     
      
  • 1
  • 2
  • 3
  • 四、通过class类获取元素、以及函数封装

    
    
    
     
     
     
    
    
    
     
     
     
  • 感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。

    更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

    希望本文所述对大家JavaScript程序设计有所帮助。

    你可能感兴趣的:(JavaScript学习笔记之DOM基础操作实例小结)