JavaScript操作DOM
1.DOM对象简介：
- 什么是DOM:(Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
2.DOM HTML 节点树：指的是DOM中为操作HTML文档提供的属性和方法，其中，文档(Document)表示HTML文件，文档当中HTML标签称之为元素(Element),文档当中所有内容称之为节点(Node)。因此HTML文件可以看成是所有元素组成的节点树，元素与元素之间有级别划分。
3.关系图解：
- 根节点：图中的<html>标签是整个文档的根节点(有且只有一个)。
- 子节点：指的是文档中某个节点的下一级节点，例如，图中 <head> 和 <body> 节点是 <html> 节点的子节点。
- 父节点：指的是文档中某个节点的上一级节点，例如，图中 <html> 元素是 <head> 和 <body> 的父节点。
- 兄弟节点：两个节点同属于一个父节点，例如，图中<a>和<h1>标签互为兄弟几点。
2.HTML元素操作：
- 根据指定ID获取指定DOM元素(推荐使用)：例如获取ID为btn的按钮：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--按钮-->
<button id="btn"></button>
<script type="text/javascript">
var btn = document.getElementById("btn");
console.log(btn);
</script>
</body>
</html> - 根据clas类名获取DOM元素：例如获取class名为.header的元素：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<nav class="header"> </nav>
<script type="text/javascript">
var header = document.getElementsByClassName('header');
console.log(header);
</script>
</body>
</html>说明：因为类名是可以重复的 所以获取的时候要注意，如果需要指定获取是某一个类可以根据索引来操作 例如获取页面class名为itms的第二个<li>标签代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<ul>
<li class="itms"><a href="">我是第1个li</a></li>
<li class="itms"><a href="">我是第2个li</a></li>
<li class="itms"><a href="">我是第3个li</a></li>
<li class="itms"><a href="">我是第4个li</a></li>
</ul>
<script type="text/javascript">
/*
* 需求：根据类名获取第2个li标
* */
//var li0 = document.getElementsByClassName('itms'); //这里是 class名为itms的集合
//console.log(li0);//注意这里是获取文档中所有类名为 itms 的标签
var li02 = document.getElementsByClassName('itms')[1];// 后面加上标签的索引即可
console.log(li02);
</script>
</body>
</html> - 根据标签名获取指定DOM元素(几乎不用)：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div></div>
<p></p>
<p></p>
<script type="text/javascript">
//获取页面所有的div标签
var getDiv = document.getElementsByTagName('div');
console.log(getDiv);
//获取页面中所有的p标签
var getP = document.getElementsByTagName('p');
console.log(getP);
</script>
</body>
</html> - 根据元素的name属性获取元素：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body> <label for="">请输入密码：</label>
<input type="text" name="search" id="" value="" />
<script type="text/javascript">
//获取属性名(name)为search的标签
var search = document.getElementsByName('search');
console.log(search);
</script>
</body>
</html>
JavaScript操作DOM的更多相关文章
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- 你所不了解的javascript操作DOM的细节知识点(一)
你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...
- JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
- 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象
一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...
随机推荐
- SCUT - 205 - 饲养牛 - 最大流
https://scut.online/p/205 连着做所以一开始就觉得是网络流. 这种至多分配几次的很有网络流的特征. 一开始想从食物和饮料流向牛,但是怎么搞都不对. 其实可以从s流向食物,食物流 ...
- PHP面向对象--接口实例
我们设计一个在线销售系统,用户部分设计如下: 将用户分为,NormalUser, VipUser, InnerUser三种. 要求根据用户的不同折扣计算用户购买产品的价格. 并要求为以后扩展和维护预留 ...
- python列表逆序三种方法
栗子: # 题目:将一个数组逆序输出. # # 程序分析:用第一个与最后一个交换. import random list =[random.randint(0,100) for _ in range( ...
- UE4 c++ 创建刚体Cube
1 新建一个Actor,一会用蓝图继承这个 TCubeActor.h #pragma once #include "CoreMinimal.h" #include "Ga ...
- Noip2016day2 组合数问题problem
题目描述 组合数表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的定 义,我们可以给出计算 ...
- Codevs 1444 “破锣摇滚”乐队
1444 “破锣摇滚”乐队 题目描述 Description 你刚刚继承了流行的“破锣摇滚”乐队录制的尚未发表的N(1 <= N <= 20)首歌的版权.你打算从中精选一些歌曲,发行M ...
- 一个模块对应一个Servlet对应一张表 BaseServlet抽取反射进行方法转发实现
- [题解]（gcd/欧拉函数）luogu_P2568_GCD
求gcd(x,y)=p等价于求gcd(x/p,y/p)=1,转化为了n/p内互质的个数 所以欧拉函数,因为有序所以乘2,再特判一下只有在1,1情况下才会重复计算,所以每次都减一 数组开小一时爽,提交w ...
- JAVAFX-1 开发应用
为什么用javafx? 写这个专题的目的,其实也是好玩,原来的熟悉的使用swing 来开发java中的gui程序,其实早就知道有javafx 这个东西的,一致没有时间的玩,最近有时间所以学习.这个专题 ...
- 12.创建高级联结---SQL
一.使用表别名 SQL除了可以对列名和计算字段使用别名,还允许给表名起别名.这样做有两个主要理由: 缩短SQL语句: 允许在一条SELECT语句中多次使用相同的表. SELECT cust_name, ...