Javascript获取页面标签元素操作

最新推荐文章于 2024-07-26 12:18:49 发布
最新推荐文章于 2024-07-26 12:18:49 发布
阅读量579 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript iframe div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boonyaxnn/article/details/52472792
版权

Javascript中获取页面标签元素对象有两种方式，即：document.getElementById("tagId")和document.getElementsByName("tagName")。

HTML与CSS样式代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe</title>
<style type="text/css">

	.left{
		color:#0F0;
		border: #0F6 1px solid;
		width:20%;
		height:300px;
		float:left;
		text-align:center;
	}
		
	.right{
		color:#0F0;
		border: #30C 1px solid;
		width:79%;
		height:300px;
		position:relative;
		float:right;
		text-align:center;
	}

</style>

<script type="text/">
  // 全局变量
  var src;
  
  //带参数函数
  function goToPage(param){
//document.getElementsByName("myIframe")[0].src=param;
 document.getElementById("myIframe").src=param;
	  src=param;
	  // 打印传递过来的参数
	  printf();
	  //$("#myIframe").attr("src",param);
  }
  
   //无参数函数
  function printf(){
	  alert(src);
  }
</script>
</head>

<body>
 <div id="left" class="left">left<br/>
          <a href="1index.html" οnclick="goToPage('1index.html')">1index</a><br/>
           <a href="2index.html"  οnclick="goToPage('2index.html')">2index</a><br/>
            <a href="3index.html"  οnclick="goToPage('3index.html')">3index</a><br/>
             <a href="4index.html"  οnclick="goToPage('4index.html')">4index</a><br/>
              <a href="5index.html"  οnclick="goToPage('5index.html')">5index</a><br/>
  </div>
     
 <div id="right" class="right">right<br/>
    <iframe id="myIframe" name="myIframe" src="1index.html" style="height:230px;width:100%;" frameborder="0" >
        </div>
</body>
</html>

注意观察：getElementById()和getElementsByName()[0]这里是等价的,getElementsByName获取的是相同名称的标签集合。

效果展示图

点击左侧的菜单右边的页面自动切换。




boonyaxnn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript获取页面元素的常用方法详解
10-16
在JavaScript中，获取页面元素是Web开发中至关重要的技能，因为这允许我们操作和改变页面上的内容。本文将详细介绍四种常用的JavaScript方法来获取页面元素，包括通过标签名、ID、类名以及CSS选择器。 1. **通过...
JavaScript中获取HTML元素值的三种方法
10-22
在JavaScript中，获取HTML元素值是网页动态交互的基础，它允许开发者从用户输入或页面上其他元素中收集信息。本文将详细介绍三种常用的方法：getElementById()、getElementsByName() 和 getElementsByTagName()，并...
javascript获取标签元素
缘 源 园
04-12 685
1. 获取标签元素 可以使用内置对象 document上的getElementById 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量，比如： <script type="text/javascript"> var oDiv = document.getElementById('div1'); alert(oDiv); </script> <div id="div1">这是一个div元素</di..
详解！!如何获取页面元素-Javascript-Dom
最新发布
2301_81079726的博客
07-26 436
本文讲解了在JavaScript中如何获取元素并对获取元素的几种方法进行了详解。
javascript 获取页面所有标签
qq_39039128的博客
09-24 828
let map = {} function getAllTag(node) { if(node.nodeType === 1) { const tagName = node.nodeName map[tagName] = map[tagName] ? map[tag...
Html常用标签元素
qachenzude的专栏
08-10 949
常用HTML标签元素结合及简介 创建一个HTML文档 设置文档标题和其它在网页中不显示的信息 设置文档的标题         最大的标题 预先格式化文本           下划线 黑体字     斜体字     打字机风格的字体 引用,通常是斜体         强调文本(通常是斜体加黑体) 加重文本(通常是斜体加黑体) 设置字体大小从1到7，
JavaScript访问对象属性的方式
10-12 426
JavaScript访问对象属性的方式 function Person ( name, age ) { this.name = name; this.age = age; this.play = function () { console.log("玩飞机"); }; } var = new Person("卡卡西", 20); obj....
javascript获取元素CSS样式代码示例
10-26
本文将详细介绍如何使用JavaScript获取元素的CSS样式信息，包括行内样式、内嵌样式、链接式样式和导入式样式。 首先，了解四种控制页面样式的常见方式： 1. 行内样式（内联样式）：直接在HTML标签中使用`style`属性...
Javascript Dom元素获取和添加详解
10-16
在JavaScript中，DOM...理解并熟练掌握DOM元素的获取和添加是JavaScript前端开发的基础，这对于动态操作网页内容、实现交互功能至关重要。正确使用这些方法和属性，可以有效地构建和修改网页结构，提升用户体验。
JavaScript文档加载模式以及元素获取
10-15
在本文中，我们将深入探讨JavaScript的文档加载模式以及如何获取页面元素。 一、文档加载模式 在JavaScript中，文档加载分为两种主要模式：同步加载（Synchronous）和异步加载（Asynchronous）。 1. 同步加载： ...
网络应用之javascript获取标签元素
qq_41810183的博客
03-04 1635
上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。
js获取元素标签的6种方法
z946541的博客
12-28 6714
js获取元素标签的6种方法 通过id获取 document.getElementById(id); // 一个，获取到 对象，获取不到 null 通过class 获取 document.getElementsByClassName(class);// 多个，获取到 伪数组，获取不到 空数组[] 同过标签名 TagName获取 document.getElementsByTagName(标签名);//多个，获取到 伪数组，获取不到 空数组[] 通过name 属性获取 document.getElemen
64. python高级------javaScript(2)
qq_40455733的博客
04-20 249
文章目录64. python高级------javaScript(2)python修炼第二十天2019年 4月19日 晴1.变量的作用域(1)局部变量(2) 全局变量2.条件语句3.获取标签元素 64. python高级------javaScript(2) python修炼第二十天 2019年 4月19日 晴 1.变量的作用域 (1)局部变量 局部变量就是在函数内使用的变量，只能在函...
统计页面的标签种类
qq_39740095的博客
08-27 271
统计页面的标签种类 // 方法1 let tags = document.getElementsByTagName('*') // 获取所有标签的names // 各个标签名的计数 let names = [] let result = {} for(let i = 0;i<tags1.length;i++) { let name = tags1[i].tagName.toLocaleLowerCase() names.push(name) if(!result[name]) {
JS的属性 节点
szw19910的博客
10-18 261
//获取父元素 /** 1、获取一个元素（子元素） 2、通过这个元素找其父元素 */ // let navEle = document.getElementsByTagName(“nav”)[0]; // console.log(navEle); // //书写格式：子元素.parentNode // let headerEle = navEle.parentNode; // console.log(headerEle); /** 获取子元素节点 书写格式:父元素.children */ // let
js获取页面上的所有标签
wyw223的博客
03-30 3223
new Set([...document.querySelectorAll('*')].map(v => v.tagName)); new Set(Array.from(document.querySelectorAll('*')).map(v => v.tagName));
JS获取页面所有元素并统计每个标签的个数
黑山老妖的博客
03-18 1万+
var tags = document.getElementsByTagName('*'); var tagsArr = []; function countTag(){ for (var i = 0; i < tags.length; i++) { tagsArr.push((tags[i].tagName).toLowerCase()); } /
原生JS获取HTML DOM元素的8种方法
热门推荐
荧光之烛
06-13 2万+
JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 通过选择器获取一个元素（querySelector） 通过选择器获取一组元素（querySelectorAll） 获取html的方法（docume...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值