我的DOM学习（一）

最新推荐文章于 2024-02-01 16:59:57 发布
最新推荐文章于 2024-02-01 16:59:57 发布
阅读量225 收藏
点赞数 1
文章标签： javascript js dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47286519/article/details/106745346
版权

web API 编程

一、 API与WEB API区别

1.API是工具，应用程序编程接口
WEB API 是接口，针对浏览器的API，用于做交互效果，一般都有输入输出，很多都是方法和函数

二、DOM

1. DOM简介

  • DOM树

  • 文档：页面为文档，document

  • 元素：所有标签为元素，element

  • 节点：页面所有内容都是节点，node

2.获取元素

  • 1 根据ID获取
<div id="content">isjv</div>

<script >
//get获得 element 元素by 通过 驼峰命名法
//id 是大小写敏感字符串
  var contentInput=document.getElementById('content');
  console.log(contentInput);//
//打印我们返回的元素对象，更好的查看属性和方法
console.dir（content);
</script>

在这里插入图片描述

  • 2 根据标签名获取：返回带有标签名对象的集合
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>1</li>
   <li>4</li>
</ul>

<script >
var lis= document.getElementsByTagName('li');
//返回的是以伪数组的形式存储的元素对象的集合
console.log(lis);
console.log(lis[0]);
//遍历打印
for (var i = 0; i <lis.length; i++) {
   console.log(lis[i]);
}
</script>

注：得到的元素是动态
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
得到元素里面的某些标签

<ul id="nav">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>1</li>
	<li>4</li>
</ul>

<script >
//element.getElementsByTagName( ); 得到元素里面的某些标签
var ulInput= document.getElementById('nav');
var lis = ulInput.getElementsByTagName('li');
console.log(lis);
</script>

在这里插入图片描述

  • 3通过类名获取元素
<div class="box"></div>
<div class="box"></div>
<script >
//根据类名获取某些元素的集合
var boxs= document.getElementsByClassName('box');
console.log(boxs);

在这里插入图片描述

  • 4通用选择器获取元素
<div class="box"></div>
<div class="box"></div>
<script >
//返回第一个，选择器加符号：.代表类，#代表id，标签不用加
var boxs= document.querySelector('.box');
console.log(boxs);
//选择所有
var boxs= document.querySelectorAll('.box');
console.log(boxs);
</script>

在这里插入图片描述

  • 5获取特殊元素 body、html
<script >
//获取body元素
var bodyEle = document.body;
console.log(bodyEle);
//获取html元素
var htmls= document.documentElement;
console.log(htmls);
</script>

在这里插入图片描述

三、事件基础

  1. 事件基础：触发响应的机制
  2. 三要素
<button id="btn">按钮</button>
<script >
//事件有三部分组成：事件源，事件类型，事件处理程序
//事件源：被触发的对象 按钮
var btn=document.getElementById('btn');
//事件类型  鼠标点击onclick
//事件处理程序 通过函数赋值方式完成
btn.onclick = function () {
	alert('点秋香');
}
</script>

在这里插入图片描述
在这里插入图片描述
3. 常见鼠标事件
在这里插入图片描述

四、操作元素

  1. 改变元素内容
  • innerText
<body> 
<button id="btn">显示时间</button>
<div>good!</div>
<script >
//事件有三部分组成：事件源，事件类型，事件处理程序
//事件源：被触发的对象 按钮
var btn=document.getElementById('btn');
var divs=document.querySelector('div');
//事件类型  鼠标点击onclick
//事件处理程序 通过函数赋值方式完成
btn.onclick = function () {
  divs.innerText=getTime();
}
//获取当今时间的函数
function getTime(){
  //时间函数
  var date =new Date();
  var year=date.getFullYear();
  var month = date.getMonth()+1;
  var dates = date.getDate();
  var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
  var day=date.getDay();
  return '今天是：'+year+'年'+month+'月'+dates+'日'+arr[day];
}
</script>

改变前
在这里插入图片描述

改变后
在这里插入图片描述
注：元素不用添加事件~~如点击~~ 也可以显示时间

<button id="btn">显示时间</button>
<div>good!</div>
<p></p>
<script >
var divs=document.querySelector('div');
//在div下面新加一个p标签
var p =document.querySelector('p');
p.innerText=getTime();
//获取当今时间的函数
function getTime(){
	//时间函数
	var date =new Date();
	var year=date.getFullYear();
	var month = date.getMonth()+1;
	var dates = date.getDate();
	var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
	var day=date.getDay();
	return '今天是：'+year+'年'+month+'月'+dates+'日'+arr[day];
}
</script>

在这里插入图片描述

  • innerHTML
    innerText不识别html标签。innerhtml 识别html标签，保留空格和换行，推荐使用
  1. 常用元素的属性操作（src，href，id，alt，title）

举例：点击不同按钮显示不同照片，修改img的src属性

<button id="zly">赵丽颖</button>
<button id="fjj">风景</button><br>
<img src="1.png" alt="" title="赵丽颖">
<script >
var zlys = document.getElementById('zly');
var fj = document.getElementById('fjj');
var img = document.querySelector('img');
zlys.onclick= function(){
	img.src='1.png';
	img.title='赵丽颖';
} 

fj.onclick= function(){
	img.src="2.png";
	img.title='风景';
} 
</script>
  1. 表单元素的属性操作（type、value、checked、selected、disabled）
<button>按钮</button>
<input type="text" value="请输入内容">
<script>
var btn= document.querySelector('button');
var input=document.querySelector('input');
btn.onclick=function () {
	input.value='点击了';
	//点击了之后被禁用disabled,
	//btn.disabld='true';
	//this指的是事件函数的调用者  btn
	//改成false，又可以重新被点击
	this.disabled=true;

}

在这里插入图片描述

  1. 案例分析
    （1）案例一
    举例：点击按钮，可以显示密码，再点击一次，密码就看不见了
    思路：利用flag变量，当为1是变为文本框，同时flag赋值为0；当为0是变为密码框，同时flag赋值为1。
<script>
var btn= document.querySelector('button');
var pwd=document.querySelector('pwd');
btn.onclick=function () {
   if (flag==1) {
   	pwd.type='text';
   	flag=1;
   }else{
   	pwd.type='password';
   	flag=0;
   }
}
</script>

（2）案例二
举例：点击按钮可以关闭图片，再次刷新，图片显示
思路：利用display.none 隐藏元素；display.block 显示元素

<div class="box">
<button>按钮</button>
<img src="1.png" alt="">
</div>
<script>
var btn= document.querySelector('button');
var box=document.querySelector('.box');
btn.onclick=function () {
	 box.style.display='none';
}

(3)案例三
举例：循环精灵背景
思路：循环

<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
<script>

var lis=document.querySelectorAll('li');
for (var i = 0; i <lis.length; i++) {
	//图片与图片之间的距离
	var index= i*44;
	//x坐标 y坐标
	lis[i].style.backgroundPosition='0-'+index+'px';
}
</script>

在这里插入图片描述
（4）案例四
举例：当鼠标点击文本框时，里面的文字隐藏，当鼠标离开文本框时，里面的文字显示
思路：获得焦点 onfocus ，失去焦点 onblur

<input type="text" value="手机">

<script>

var input=document.querySelector('input');
//得到焦点
input.onfocus=function(){
	if (this.value==='手机') {
			this.value='';	
		}
}
//失去焦点
input.onblur=function(){
	if (this.value==='') {
			this.value='手机';	
		}
}
</script>
  1. 样式的属性操作
    （1）element.style
    （2）element.ClassName 类名样式操作

在这里插入图片描述
在这里插入图片描述

奋斗的猪猪霞
关注
JavaScript DOM学习第一章 W3C DOM简介
01-19
在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。 首先是对于DOM的一些建议和DOM设计的目的，然后我会告诉你什么是节点（nodes）并且...
DOM学习
m0_67736469的博客
06-24 332
了解前端开发中DOM
DOM（文档对象模型）学习
weixin_63494309的博客
06-23 1570
DOM学习
学会DOM这一篇文章就够了
最新发布
weixin_62520914的博客
02-01 2225
DOM对象内，有数百个属性和方法。DOM对象处理的核心，就是对DOM中的进行一些增、删、改、查、事件操作、属性操作等一系列操作。DOM核心操作思维导图 是 JavaScript 中的一种方法，用于将文本或 HTML 写入到 HTML 文档中。这个方法通常用于在文档加载过程中动态生成内容。用法 content: 要写入到文档的文本或 HTML 内容。注意事项示例 写入变量值 使用 时需要小心，尤其是在文档加载后。推荐使用更现代的 DOM 操作方法，以确保更好的性能和可维护性。
DOM 初学者指南
2201_75715995的博客
12-28 2910
DOM（Document Object Model——文档对象模型），可以简单理解为浏览器创建的节点树，每个节点有自己的属性和方法，可以通过 JavaScript 来操作这些属性、调用这些方法。操作 DOM 的能力是 JavaScript 最独特和有用的特性之一。下图是 DOM 树的视觉表示。document 对象是 DOM 的核心/基础，执行任何形式的 DOM 操作都要访问 document 对象。根元素html是 document 对象的子节点。下一行是body和head。
DOM基础知识
Mozarty的博客
04-22 1307
何为DOMDOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。何为Web APIWeb API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。
js DOM的学习笔记
10-28
从上述内容中，我们可以得知，学习DOM的目的是为了能够在网页开发中实现动态交互效果。通过JavaScript操纵DOM，可以做到页面元素的动态生成、修改和删除，从而实现更加丰富多彩的用户界面。要精通DOM操作，必须熟悉...
html.rar_dom基础学习
09-21
DOM基础学习主要包括以下几个方面： 1. **DOM结构**：DOM将HTML文档解析为一棵由节点组成的树，其中每个元素、属性和文本都对应一个节点。根节点是`<html>`，下面包含`<head>`和`<body>`两个子节点。元素节点有子...
学习DOM操作第一个小例子
02-04
点击隔行换色 点击元素,背景色要发生改变 之前的元素恢复默认的背景色
JavaScript—DOM学习
weixin_50735831的博客
08-08 452
dom基础学习
二叉查找树代码java+运行结果
qq_39773004的博客
08-04 566
1.代码 package TestTree;/* * zt * 2020/8/3 * 14:41 *二叉查找树： */ public class BinarySortTree { //根节点 private Node root; //元素个数 private int size; public int getSize() { return size; } //添加元素 public void add(int v
DOM学习笔记
weixin_51010474的博客
04-18 1166
定义一、获取元素1、根据ID获取2、根据标签名获取 3、H5新增方法获取——均是以伪数组的形式返回（1）根据类名获取某些元素的集合（2）返回指定选择器的第一个元素对象（3）返回指定选择器的所有元素对象集合4、获取某些特殊元素（body、html）二、事件1、定义2、事件三要素三、操作元素1、改变元素内容2、改变元素属性（1）获取属性值（2）改变元素属性值（3）移除元素属性值3、改变表单元素4、修改样式属性5、排他思想：首先先排除其他人 然后再设置自己的样式6、H5新增的自定义属性
DOM 基础详解
m0_52861684的博客
09-26 3149
DOM 基础事件从零开始详细总结。
DOM的学习笔记
浅汐
09-22 321
The dom4j Project Homepage: http://www.dom4j.org  Loading XML Data    以下代码从File中或一个URL中读取一个XML文件，并产生一个Document对象。一个Document对象表示了内存中的一棵XML树，可以在这个XML树中进行遍历、查询、修改等操作。    import java.io.*;  import java.ne
DOM的有关操作（上）
weixin_47406138的博客
09-07 230
标签的获取 通过ID获取 <div id="time">2020-09-05</div> <script> var timer = document.getElementById('time'); console.log(timer); 通过标签名获取（以伪数组形式存储） <ul> <li>我就是我1</li> <li>我就是我2<
DOM学习-20180905
且行且珍惜
09-05 181
今日学习一点DOM； 属性 一、获取 语法一；document.getElementById(“id名”).getAttribute(“属性名”); 语法二； document.getElementById(“id名”).style.属性; 二、修改 修改 语法一；document.getElementById(“id名”).setAttribute(“属性名”,”新属性值”); ...
DOM学习总结
lkrdmm的博客
10-04 261
DOM是操作HTML的一个非常常用的技术； 我们可以把HTML所有的标签看成是一棵树，然后每个标签中包含的标签了就是这个标签的子节点或者子孙节点。这种树的概念很方便我们在JS中去管理HTML页面。 在DOM中，我们和标签元素一般都是通过id选择器或者标签选择器来连接起来的。 DOM有很多强大的功能，比较常见的： 列如对指定的元素内容进行修改 document.getElementById("id").innerHTML = "new" 一般获取的方法有三种： getElementById(id) - 获取
DOM学习精要与实战示例解析
以下是对DOM学习的总结： 1. 重新导航到指定地址： 在JavaScript中，可以使用`window.location.href`属性来改变当前页面的URL，实现页面的重定向。例如： ```javascript window.location.href = "//...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值