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
- 【干货】计算机视觉实战系列03——用Python做图像处理
- Adaboost从原理到实现(Python)
- Selenium+python自动化22-发送各种类型附件邮件
- Selenium2+python自动化38-显示等待(WebDriverWait)
- 逆元(个人模版)
- Selenium2+python自动化37-爬页面源码(page_source)
- ex_gcd(个人模版)
- Selenium2+python自动化36-判断元素存在
- Java A+B(个人模版)
- TensorFlow实战:SoftMax手写体MNIST识别(Python完整源码)
- set排序(个人模版)
- TSP(个人模版)
- 树的重心(个人模版)
- Selenium2+python自动化35-获取元素属性
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Silverlight CreateObjectEx 参考
- NHibernate 配置使用 Formula
- Not allowed to navigate top frame to data URL问题
- MonoTouch绑定CocoaTouch类库
- NuGet 使用自定义本地类库目录
- Flutter/Dart中的异步编程之Isolate
- System.Net.Http for Silverlight
- 在SAP WebClient UI里混用ABAP Webdynpro,会带来哪些问题?
- 设计模式之中介者模式
- SAP WebClient UI创建Value help最详细的步骤
- 设计模式之迭代器模式
- 跨平台开发框架 MvvmCross 初体验
- 设计模式之解释器模式
- 设计模式之命令模式
- 设计模式之职责链模式