JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

时间:2019-08-14
本文章向大家介绍JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件,主要包括JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

一丶DOM树

      DOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

      DOM就是由节点组成的:HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树.如下图

# 在HTML中,一切皆节点. 一切皆节点对象
# 结构:
    # 元素节点: HTML标签
    # 文本节点: 标签中的文字
    # 属性节点: 标签的属性

# 利用dom可以操作以下:
    找对象(元素节点)
    设置元素的属性值
    设置元素的样式
    动态创建和删除元素
    事件的触发:事件源,事件,事件的驱动程序

二丶节点查找(直接查找和间接查找)

直接查找:

      DOM节点的获取方式其实就是获取事件源的方式

​      操作元素节点,必须首先找到该节点。有三种方式可以获取DOM节点:

//方式一:通过id获取单个标签 
    var div1 = document.getElementById("box1");  
    
//方式二:通过 标签名 获得 标签数组,所以有div
    var arr1 = document.getElementsByTagName("div");   
    
//方式三:通过 类名 获得 标签数组,所以有p1类
    var arr2 = document.getElementsByClassName("p1");  
//----- div1 ,arr1,arr2 都是对象

//其中方式二、方式三获取的是标签数组,那么习惯性是先遍历之后再使用。
//即便如此,这一个值也是包在数组里的。这个值的获取方式如下:
    document.getElementsByTagName("div1")[0];    //取数组中的第一个元素
    document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

间接查找:

​      可以查找当前节点的 子父节点 ,兄弟节点 . 如下图

原文地址:https://www.cnblogs.com/dengl/p/11355179.html