DOM编程获取元素

最新推荐文章于 2024-04-07 01:24:32 发布
最新推荐文章于 2024-04-07 01:24:32 发布
阅读量592 收藏
点赞数
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62898618/article/details/123340869
版权

BOM：browser object model 浏览器对象模型

2.1 document对象：表示整个文档
    BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。
    因为document对象又是DOM（Document Object Model）模型的根节点。
    可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。


    ①write()方法：可以向页面输出变量也可以向页面输出html代码

    ②getElementById()方法：通过id得到标签
    【案例】--图片切换

    ③getElementsByName()方法：通过标签的name值得到标签，返回的时一个集合（数组）
    【案例】使用该方法得到所有的input标签然后打印value值

    ④getElementsByTagName()方法：通过标签名称得到元素
    【案例】使用该方法得到所有input标签，如果是text就给value赋值aa，如果是button就使用onmouseover打印呵呵


2.2 元素的显示和隐藏
    **visibility属性    visible    表示元素是可见的
    hidden    表示元素是不可见的
    object.style.visibility="值"

    display属性
    none    表示此元素不会被显示
    block    表示此元素将显示为块级元素，此元素前后会带有换行符
    object.style.display="值"

 获取元素

根据ID属性获取标签对象：document.getElementById()

根据标签名获取一组标签合集：document.getElementsByTagName();

var oLis = document.getElementsByTagName('某标签 列如li，a标签，');

 //获取指定li（OL）获取ol标签中得li 标签
        var oL = document.getElementsByTagName('ol')[0];
        var oLisDemo = oL.getElementsByTagName('li');
        console.log(oLisDemo);

根据标签上的name属性可以获取同一组标签对象（相当于数组）:document.getElementsByName('name属性值')

HTML5.0版本以上的获取元素的方式
 选择器： ID选择器（#）  类选择器（.）  标签选择器

var oBtn2 = document.querySelector('#oBtn2');
 console.log(oBtn2); id获取方式

类获取方式

var oBox = document.querySelector('.oBox');
 console.log(oBox);

标签获取方式

var btn = document.querySelector('button'); button按钮标签为列子
console.log("result = "+btn.innerHTML);

根据类选择器获取一组标签

    <h5>根据选择器获取一组元素 document.querySelectorAll()</h5>
    <input type="checkbox" class = 'oInputs'>
    <input type="checkbox" class = 'oInputs'>
    <input type="checkbox" class = 'oInputs'>
    <input type="checkbox" class = 'oInputs'>
    <input type="checkbox" class = 'oInputs'>
    <script type="text/javascript">
        //根据选择器获取一组元素
        var oInputs = document.querySelectorAll('.oInputs');
        console.log(oInputs.length);


innerText innerHTML value 区别

这2个属性都是用来设置或者获取标签中的文本内容（非表单元素）

//根据ID属性获取元素对象
//innerText 获取内容时，不包括该标签中的子标签
var oDiv = document.getElementById('oDiv');
console.log(oDiv.innerText);//Text 文本
//innerHTML 获取内容时，包括标签
console.log(oDiv.innerHTML);
var oBox = document.querySelector('.oBox');
//innerText设置时 标签时无效的。
// oBox.innerText = '<h1>好好学习</h1>'
// innerHTML设置时 标签是有效的
oBox.innerHTML = '<h1>好好学习</h1>'

 图片轮播案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<h3>简易图片轮播器</h3>
	<hr>
	<img src="img/1.jpg" alt="">
	<br>
	<br>
	<button onclick="nextImg();">下一张</button>
	<button onclick = "autoImg();">自动切换图片</button>
	<button onclick = "stopImg();">停止自动切换图片</button>
	<script type="text/javascript">
		//定义数组  存储所有的图片名称  通过下标获取
		var imgs = [
			'img/1.jpg',
			'img/2.jpg',
			'img/3.jpg',
			'img/4.jpg'
		];

		var index = 0;
		//设置nextImg函数
		function nextImg(){
			//获取img标签
			var oImg = document.querySelector('img');
			index++;
			if(index>=imgs.length){
				index = 0;//归0
			}
			oImg.src = imgs[index];
			console.log(index);
		};

		//自动切换
		var timer = null;
		function autoImg(){
			timer = window.setInterval(function(){
				nextImg();
			},1000);
		}
		//停止定时器
		function stopImg(){
			window.clearInterval(timer);
		}

		//获取img标签
		var oImg = document.querySelector('img');
		oImg.onmouseover = function(){
			stopImg();
		};
		oImg.onmouseout = function(){
			autoImg();
		};
		//当页面加载完毕后自动播放图片
		window.onload = autoImg();
	</script>
</body>
</html>

隐藏与显示点击切换样式案例


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{
			width: 200px;
			height: 200px;
		}

	</style>
</head>
<body>
	<!-- 
		控制元素隐藏与显示
			visibility属性    visible	表示元素是可见的	hidden	表示元素是不可见的
			object.style.visibility="值"
			
			display属性			none	表示此元素不会被显示	block	表示此元素将显示为块级元素，此元素前后会带有换行符
			object.style.display="值"


	 -->
	 <h3>控制标签的显示与隐藏</h3>
	 <!-- 对于visibility属性以及display属性都需要借助style属性才能进行调用 -->
	 <img src="img/1.jpg" alt="">
	 <img src="img/2.jpg" alt="">
	 <img src="img/3.jpg" alt="">
	 <br>
	 <button id="oBtn1">控制隐藏（visibility属性）</button>
	 <button id="oBtn2">控制显示（visibility属性）</button>
	 <script type="text/javascript">
	 	var oBtn1 = document.querySelector('#oBtn1');
	 	oBtn1.onclick = function() {
	 		// var oImg2 = document.getElementsByTagName('img')[1];
	 		var oImg2 = document.querySelectorAll('img')[1];
	 		// alert(oImg2.src);
	 		// visibility 属性隐藏时  会占用位置
	 		oImg2.style.visibility = 'hidden';
	 	};

	 	var oBtn2 = document.querySelector('#oBtn2');
	 	oBtn2.onclick = function() {
	 		// var oImg2 = document.getElementsByTagName('img')[1];
	 		var oImg2 = document.querySelectorAll('img')[1];
	 		// alert(oImg2.src);
	 		// visibility 属性隐藏时  会占用位置
	 		oImg2.style.visibility = 'visible';
	 	};
	 </script>

	 <hr>
	 <img src="img/1.jpg" alt="">
	 <img src="img/2.jpg" alt="">
	 <img src="img/3.jpg" alt="">
	 <br>
	 <button id="oBtn3">控制隐藏（display属性）</button>
	 <button id="oBtn4">控制显示（display属性）</button>

	 <script type="text/javascript">
	 	var oBtn3 = document.querySelector('#oBtn3');
	 	oBtn3.onclick = function() {
	 		// var oImg2 = document.getElementsByTagName('img')[1];
	 		var oImg2 = document.querySelectorAll('img')[4];
	 		// display 属性隐藏时  不会占用位置
	 		oImg2.style.display = 'none';
	 	};

	 	var oBtn4 = document.querySelector('#oBtn4');
	 	oBtn4.onclick = function() {
	 		// var oImg2 = document.getElementsByTagName('img')[1];
	 		var oImg2 = document.querySelectorAll('img')[4];
	 		// alert(oImg2.src);
	 		// display 属性隐藏时  bu 会占用位置
	 		// display  inline  block  inline-block
	 		oImg2.style.display = 'inline-block';
	 	};
	 </script>

	 <hr>

	 <img style="border: 10px solid red;" id="oImgBox" src="img/1.jpg" alt="">
	 <button id="oBtnBox">点击设置样式</button>
	 <br><br><br><br><br><br><br>
	 <script type="text/javascript">
	 	 var oBtnBox = document.querySelector("#oBtnBox");
	 	 oBtnBox.onclick = function(){
	 	 	var oImgBox= document.querySelector('#oImgBox');
	 	 	// oImgBox.style.border = '10px solid red';
	 	 	// oImgBox.style.width = '500px';
	 	 	//根据style获取属性值  有bug（不兼容）
	 	 	//style属性只能获取行内式样式
	 	 	// alert(oImgBox.style.border);
	 	 	alert(oImgBox.style.width);
	 	 };
	 </script>
</body>
</html>

嘴强程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM获取元素的方法
2201_75397635的博客
04-23 2144
document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元素。querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法返回指定选择器的所有元素对象集合。document.getElementById('id')方法，是由document对象提供的用于查找元素的方法。返回的集合是一个类数组对象，它可以像数组一样用索引来访问元素，但不能使用push()等方法。(1)该方法返回的是拥有指定id的元素；
DOM操作-获取元素的方法
m0_68348293的博客
07-14 591
•通过类名获取,#box1指的是类名•通过类名获取，返回值是个数据容器(类数组)，可同时获取多个元素，没有就返回空数组•通过标签名来获取，可同时获取多个元素，没有就返回空数组•通过name来获取，可同时获取多个元素，没有就返回空数组。...
JavaScript DOM编程-通过DOM获取页面元素的方法
qq_49900295的博客
03-02 1532
文章目录一、什么是DOM？DOM树：1.文档：2.元素：3.节点：二、获取页面中的元素的几种方法：1.根据 id 获取元素2.根据标签名获取元素3.通过HTML5新增的方法获取元素4.根据特殊元素获取元素 一、什么是DOM？ DOM简称：文档对象模型，是一种处理可扩展编程语言的标准编程接口，我们通过这些接口来改变网页的内容、结构和样式。 DOM树： 1.文档： 一个网页就是一个文档，DOM中使用document表示 2.元素： 页面中的所有标签都是元素，DOM中使用element表示 3.节点： 网页
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
热门推荐
CYK_byte的博客
11-04 1万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
DOM总结
zx15232117293的博客
11-29 157
总结
DOM中元素操作
涔曦的博客
09-27 438
知识大纲： DOM是什么？ 节点类型； 获取元素； 创建元素； 插入元素； 删除元素； 复制元素； 替换元素； DOM是什么？ DOM对象 DOM(Document Object Model)全称“文档对象模型”，是W3C定义的一个标准。 DOM操作，可以简单理解成“元素操作”。 DOM结构 DOM采用“树形结构”，用“树节点”的形式来表示页面中的每个元素。例如： &...
javascript 获取样式和修改样式的方法
u012600104的博客
01-11 1750
获取行间样式 在说这个之前先重点说一个对象 arguments。这个对象的作用是能把 javascript函数内的所有参数都读取得到，也就是说javascript把传进函数的参数都存储到了这个对象里了。 例如： function plus(){ var res=0; //这是定义结果 //arguments.length 获取传进参数的数量(类似于获取数组长度)
Javascript元素相关
ylovd的博客
02-23 756
JavaScript元素相关 获取元素 根据标签id document.getElementById(); 根据标签名 document.getElementByTagName(); 返回的是获取过来的元素对象集合，以伪数组的形式存储，可以采取遍历的方式来获取伪元素中的对象，得到的元素对象是动态的 还可以获取父元素内部所有指定标签名的子元素 父元素必须是单个对象，获取时不包括父元素自己 html5新增 获取元素 根据类名获取 document.getElementByClassName(); 根据选择器 d
JavaScript基础学习（三）
Jenny_Ghost的博客
01-20 545
一、DOM事件流 二、事件对象 三、常见鼠标事件 四、常见键盘事件 五、图案跟随鼠标案例
js切换背景
qq_62336903的博客
04-05 356
我们通过获取所有的img元素，在给每个img元素添加一个点击事件，最后通过点击img标签将 img标签的src送给body的背景。 js部分 var img = document.querySelectorAll('img'); for (var i = 0; i < img.length; i++) { img[i].onclick = function() { document.body.style.backgro
图片懒加载的两种方式
weixin_46382886的博客
05-23 203
图片懒加载（手写+插件）
DOM基础
content899的博客
09-19 855
DOM基础
JS获取DOM元素的八种方法(含代码,简单易懂)
m0_74577714的博客
09-16 4448
六种获取元素的方法
DOM——获取元素方式
weixin_68160847的博客
01-12 1002
（1）获取元素 （2）对元素进行操作（设置其属性或调用其方法） （3）动态创建元素 （4）事件（什么时机做相应的操作）
JavaScript DOM及其操作（获取元素方法）
modao的博客
06-08 200
本文主要介绍原生js中 DOM的获取元素的方法。
Dom 获取元素的几种方式
qq_66198247的博客
05-23 9875
一.Dom简介 文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 二.Dom树 文档：一个页面就是一个文档，Dom中用document表示 ； 元素：页面中的所有标签都是元素，Dom中使用element表示； 节点：网页中的所有内容都是一个节点（标签，属性，文本，注释等），Dom中使用node表示 Dom
DOM--获取元素
JJ_Smilewang的博客
05-24 585
1. 什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 2. 什么是DOM树 (1)DOM树：在内存中，集中保存一个网页中所有内容的树状图。 (2)为什么使用DOM树：能够直观的保存上下级包含关系的数据结构，html标签就是包含的关系，所以网页中每一项内容，在内存中，都是存在树形结构.
DOM：1.获取元素，2.操作元素（样式，属性，类名，内容）
qq_60839348的博客
12-09 1410
DOM：获取元素，操作元素（样式，属性，类名，内容）
JavaScript DOM编程-通过DOM获取页面元素的方法(1)
最新发布
2401_84092456的博客
04-07 908
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
XML DOM编程模型简单参考手册
XML-DOM编程模型简单参考手册.doc是一种应用在Web浏览器中的技术，它使用文档对象模型（DOM）来访问和操作浏览器的窗口、文档和历史等对象。然而，不同的浏览器对这些对象的访问和操作方式各不相同。为了达到更加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值