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 ...
随机推荐
- [51nod] 1267 4个数和为0 暴力+二分
给出N个整数,你来判断一下是否能够选出4个数,他们的和为0,可以则输出"Yes",否则输出"No". Input 第1行,1个数N,N为数组的长度(4 < ...
- mysql-5.5.56免安装版配置方法
1. 下载mysql-5.5.56-winx64 网址:dev.mysql.com/downloads/mysql/ 2. 解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义目录下,我 ...
- 解决resignFirstResponder或者endEditing无效的办法
当你想要收回弹出的键盘时却发现平时用的resignFirstResponder和endEditing都失去作用时,应该考虑一下当前的TextField是否为第一响应者,如果不是第一响应者的话,自然下面 ...
- OSU!
题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline ll read(){ ,f= ...
- centos 创建 logrotate 进行日志分割
这里就不赘述logrotate了,具体是什么,有什么作用,自行百度. 我们先说下,如何进行nginx的日志切割: 比如:日志目录为:/usr/local/nginx/logs/access.log按照 ...
- django-跨域访问
pip install django-cors-headers #安装cors INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE_CLASS ...
- C# 数组之int[]
一.数组分类 数组可以简单分为3类: 1维数组 2维数组 交错数组 二.数组初始化 1.一维数组 int [] A = { 1,2,3,4 } 直接赋值 或者 int [] A = new int [ ...
- 关于AQS——独占锁特性+共享锁实现（二）
五.可中断获取锁的实现(独占锁的特性之一) 我们知道lock相较于synchronized有一些更方便的特性,比如能响应中断以及超时等待等特性,现在我们依旧采用通过学习源码的方式来看看能够响应中断是怎 ...
- Linux下无法挂载Ｕ盘
大概的错误信息是这样的: Error mounting /dev/sdb4 at /media/xxx/xx: Command-line`mount -t "ntfs" -o&qu ...
- 【翻译转载】【官方教程】Asp.Net MVC4入门指南（6）：验证编辑方法和编辑视图
本节中,您将开始修改为电影控制器所新加的操作方法和视图.然后,您将添加一个自定义的搜索页. 在浏览器地址栏里追加/Movies, 浏览到Movies页面.并进入编辑(Edit)页面. Edit(编辑) ...