使用DOM对象提供的方法来访问DOM元素

最新推荐文章于 2023-11-03 10:06:08 发布
最新推荐文章于 2023-11-03 10:06:08 发布
阅读量375 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62371223/article/details/124848842
版权

    1，什么是DOM?

1.DOM--->D ocument  O bject  Mode
2.DOM定义了表示和修改文档所需的方法。 DOM 对象即为宿主对象，由浏览器厂商定义，用来操作 HTML 和 XML 功能的一类对象的集合，也有人称 DOM 是对 HTML 及 XML的标准编程接口。

2，document对象常用方法

方法描述

getElementById()

返回对拥有指定id的第一个对象的引用

getElementsByName()

返回带有指定名称的对象的集合

getElementsByTagName()

返回带有指定标签名的对象的集合

getElementsByClassName()

返回带有指定类名的对象的集合

write()

向文档写文本、HTML表达式或JavaScript代码

3，js修改样式

Obj.style . 属性 =“ 值 ”;

例如：

Obj.style.width=“100px”;

Obj.style.marginTop=“10px”;

Obj.stlye.lineHeight=“24px”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 200px;
				height: 200px;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div id="div">
			你好你是猪
		</div>
		<button type="button" onclick="cc()"></button>
		<script>
			function cc(){
				var div=document.getElementById('div');
				div.style.width='300px';
				div.style.fontSize='40px';
			}
		</script>
	</body>
</html>

4，页面的显示与隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
			#div{
				width: 200px;
				height: 200px;
				border: 2px solid red;
			}
			.h{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="div">
			你好你是猪
		</div>
		<button type="button" onclick="cc()"></button>
		<script>
			function cc(){
				var div=document.getElementById('div');
				var dd=div.style.display;
				if(dd!=='none'){
					div.style.display='none';
				}else{
					div.style.display='block';
				}
				var div=document.getElementById('div');
				div.classList.toggle('h')
			}
		</script>
	</body>
</html>

5，查询节点
document
    getElementById()
通过id获取元素
    getElementsByTagName()
通过标签名获取节点列表
    getElementsByClassName()
通过类名获取节点列表
    getElementsByName()
通过名称获取列表
    querySelector()
通过css选择器获取节点
querySelectorAll()
通过css选择器获取节点列表

6，遍历节点
    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="dom">解决解决军军军军军军军军军军</h1>
		<p>你好1</p>
		<p>你好2</p>
		<p>你好3</p>
		<h1>dom的节点查询</h1>
		<script>
			document文档 git获取 Element元素节点 By通过 Id唯一识别的标识符
			var dom = document.getElementById('dom');
			console.log(dom, dom.innerText)
			// element多个节点  By通过 Tag标签  Name名称
			// byTagname 通过标签名获取多个节点 （类似数组的集合）
			var ps = document.getElementsByTagName('p');
			console.log(ps, ps[0].innerText);
			var fav = document.getElementsByName(fav);
			fav[1].checked = true
			console.log(fav)
			0.1
			var ps=document.getElementsByTagName('p');
			for(var i=0;i<ps.length;i++){
				console.log(ps[i],ps[i].innerText);
			}
			0.2
			var arr=Array.from(ps);//转换为数组
			arr.forEach(function(elem){
				console.log(elem,elem.innerText)
			})
		</script>
	</body>
</html>

7，改变层内容
   innerText
获取/改变文本内容
    innerHTML
获取/改变html内容

8，通过style修改样式

   elem.style.width="400px"
修改样式
elem.style.fontSize="48px"
注意使用驼峰命令

也可以通过
elem.style.width 来获取行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 200px;
				height: 200px;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div id="div">
			你好你是猪
		</div>
		<button type="button" onclick="cc()"></button>
		<script>
			function cc(){
				var div=document.getElementById('div');
				div.style.width='300px';
				div.style.fontSize='40px';
			}
		</script>
	</body>
</html>

10，通过classList
         classList       toogle()切换类名
                                add() 添加类名
                                remove() 删除类名
                                contains()检测是否包含类名    

嘟噜嘟噜123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML元素通过DOM方式访问
艺博❀
05-14 245
访问HTML元素方式（3种） 根据ID访问HTML元素 根据CSS选择器访问HTML元素 利用节点关系访问HTML元素 根据ID访问HTML元素 //格式 document.getElementById("元素ID") <body> <div id="id1">元素一</div> <textarea id="id2">元素二</texta...
JavaScript DOM 中 实现元素对象的访问
ios0213的专栏
06-23 315
无标题文档 double1double2 double3double4double5 var table=document.getElementsByTagName("table")[0]; var tableTr=table.getElementsByTagName("tr");/* + - 为保留的特殊字符，不允许用在变量或者函数里面*/ for(var i=0;i<tableTr
DOM 元素访问
weixin_51958409的博客
11-26 47
元素访问 <button id="btn">按钮</button> <button class="c1">按钮</button> <button class="c1">按钮</button> <button>按钮</button> <button name="btn1" class="c1">按钮</button> <button name="btn1">按钮</butt
HTML DOM 访问
冷月醉雪的博客
05-15 173
访问 HTML 元素(节点)     访问 HTML 元素 等同于访问节点     您能够以不同的方式来访问HTML元素：     ·通过使用getElementById()方法；     ·通过使用getElementsByTagName()方法；     ·通过使用getElementsByClassName()方法；   getElementById()方法    getEl...
dom访问方法
madanling的专栏
02-28 512
1、document.getElementById();获取单个对象   2、document.getElementsByName()根据网页元素的name获取对象      获取的是节点列表（对象数组）   3、document.getElementsByTagName()根据网页标签名称获取对象（节点列表（对象数组））   除了上述基本的访问方式，还有一些辅助   node.firs
jquery入门—访问DOM对象方法
01-19
通过JQuery库中的方法访问或控制页面中的元素，比使用JavaScript代码要简洁得多，而且兼容各浏览器。 示例代码： 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> &...
JS实现访问DOM对象指定节点的方法示例
10-18
本示例主要讲解如何使用JavaScript实现访问DOM对象指定的节点，包括使用`getElementById()`方法，以及通过`nodeName`、`nodeType`和`nodeValue`属性获取节点的相关信息。 **一、介绍** 1. **getElementById()方法*...
js基础之DOM中元素对象的属性方法详解
01-19
在 HTML DOM （文档对象模型）中，每个部分都是节点。 节点是DOM结构中最基本的组成...要注意：NodeList是‘动态的’，也就是说，每次访问NodeList对象，都会运行一次查询，虽然这样增加了开销，但可以保证我们新添加的
vue操作dom元素的3种方法示例
10-14
Vue提供了一个特殊属性`ref`，允许我们在组件实例中引用DOM元素或子组件。在模板中，给需要引用的元素添加`ref`属性，然后在Vue实例的`this.$refs`对象中就可以访问它。例如： ```html <div ref="myDiv"></div> ...
DOM的节点访问以及操作
CoderHenryLee的博客
11-18 609
1.DOM的节点访问DOM节点的关系如下图： 其中兄弟节点和子节点有个浏览器兼容的问题，以nextSibling为例，nextSibling在ie678才有效，而nextElementSibling在正常浏览器才有效。兼容的写法如下：var div = one.nextElementSibling || one.nextSibling; div.style.backgroundColor =
DOM对HTML元素访问操作
Mark的博客
10-21 969
1、什么是DOM？ DOM是文档对象模型（Document Object Model）的简称。当网页加载时，可以将结构化文档在内存中转换成对象的树。 以下是一个HTML DOM树： 简单的说DOM并不是一种技术，而是访问结构化文档的一种思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。 2、DOM节点 DOM模型中的节点--文档可以说是由节
DOM对HTML元素的两种访问操作
最好的一天
11-21 715
1.通过ID访问，即document.getElementById(); id具有唯一性 例如如下代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;使用getElementById方法查找元素&lt;/title&gt; &lt;script type="text/javascript"&gt; f
DOM对象的常用方法
lesorb的专栏
01-21 1491
 DOM对象的常用方法2007-09-19 15:17由于DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是 按字母来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node and node),想学习DHTML中的DOM 千万不要从头到尾地
DOM访问方式
iteye_14486的博客
07-30 82
DOM.html: &lt;html&gt; &lt;body&gt; &lt;form name="Form1" id="Form1" name="Form2"&gt; &lt;input name="Input1" value="dddd" type="text"/&gt; &lt;input nam
html有趣行为——直接通过id操作dom
qq_39217871的博客
09-17 472
分享一个有趣的经验 最近在学习中，偶然发现一个有趣情况：在html文档中可以在未定义变量的情况下直接通过html标签上的id值获取到dom元素并进行操作。 可以先看看如下的情况： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
零散细节知识点总结
weixin_54145360的博客
10-31 517
零散细节知识点总结
【JavaScript】通过 getElementById 获取到的东西，到底都能干点啥
最新发布
weixin_45968070的博客
11-03 4706
id：你可以通过 element.id 来获取元素的 id 属性的值。tagName：通过 element.tagName 可以获取元素的标签名，例如元素的标签名是 “DIV”。innerHTML：使用 element.innerHTML 可以获取元素内部的 HTML 内容，包括文本和嵌套元素。textContent：通过 element.textContent 可以获取元素内部的纯文本内容，不包括 HTML 标记。
js通过标签元素id，用document.getElementById().style设置标签元素的css属性
热门推荐
kissing7的专栏
05-14 3万+
对定义了id的html标签元素，js可以通过以下方法修改标签元素的css样式： 方法一： 对标签定义一个css样式： document.getElementById("idname").style.display="none"; 方法二： 对标签定义多个css样式： var a = document.getElementById("idname"); with(a.style
JavaScript classList() 属性和方法解释
allway2的博客
06-05 6958
属性是 HTML 元素的一个属性，它保存当前选定元素的类名。您可以使用该属性将 HTML 元素的类名作为数组获取。例如，假设您的标签中有以下 HTML 元素： 您可以使用该方法获取上面的元素，然后您可以使用or属性获取元素的类名。属性以字符串形式返回类名，而属性以数组形式返回类名： 该属性是只读属性。如果要操作 HTML 元素的类，则需要使用属性中包含的方法。它们如下：让我们从方法开始了解这些方法是如何工作的。该方法允许您向元素添加一个或多个类名。您只需要将要添加的类名作为逗号分隔的字符串传递：
js 使用`拼接dom元素onclick方法如何传递对象
06-08
如果你想在 JavaScript 中使用字符串拼接 DOM 元素的 onclick 方法，并且想将一个对象作为参数传递，可以使用闭包的方式来实现。 例如，如果你有以下对象： ``` let obj = { name: "John", age: 30 }; ``` 你可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值