js 标签属性与导航
导航标签的方法：
一 , 全局导航:
1.通过by id导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<div id="div2">hello div</div>
<p id="p1">hello p</p>
</div>
</body>
<script>
var ele=document.getElementById("div1").firstElementChild; //获得element div1的标签下的第一个element标签；div
alert(ele.nodeName); // alert name 属性 p
alert(ele.nodeType); // alert type 属性 1
alert(ele.nodeValue); // alert value 属性 null var ele1=document.getElementById("div2").nextElementSibling; //获得 element div1 的下一个兄弟标签； p = nodeName
var ele2=document.getElementById("p1").previousElementSibling; //获得 element p1 的上一个兄弟标签； div = nodeName
var ele3=document.getElementById("div1").lastElementChild; //获得 element div1父亲下的子标签的最后一个； p = nodeName
var ele4=document.getElementById("div2").parentElement; //获得 element div2的子标签的父级标签； div = nodeName var ele5=document.getElementById("div1").children; //获得 element div1 下的所有标签，并组成一个数组；element；
alert(ele5.length) //获得 div1下的element 标签个数； 2
alert(ele5[0].nodeName) //获得 div1下的数组第一个标签的名字；div
for (var num=0;num<ele5.length;num++){
alert(ele5[num].nodeName)
} //for循环出数组ele5里的标签名 div p
</script>
</html>
=============================================================================================================== 2.通过by class导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">hi div
<div class="div2">hello div1</div>
<p>hello p!</p>
<div class="div2">hello div2</div>
</div>
<script>
var ele=document.getElementsByClassName("div2")[0]; //找出class叫DIV2的所有标签,并且取这个数组的第一个.<div class="div2">hello div1</div>
var ele1=ele.nextElementSibling; //找出刚才找到的标签的下一个element标签. <p>hello p!</p>
alert(ele1.innerHTML) //打印他的标签的文档 hello p!
</script>
</body>
</html> =================================================================================================================================================
3.通过by tag导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="div1">hi div
<div class="div2">hello div1</div>
<p>hello p!</p>
<p>hello pppp!</p> <div class="div2">hello div2</div>
</div> </body>
<script>
var ele=document.getElementsByTagName("p"); //得到叫p标签的所有数组
alert(ele[1].innerHTML); //获取此数组里第2个P标签的文档 hello pppp!
var ele1=document.getElementsByTagName("div"); //得到叫p标签的所有数组
alert(ele1[1].innerHTML); //获得的是 <div class="div2">hello div1</div> 这个标签里的hello div1
alert(ele1[0].innerHTML); //如果要获得hi div 用查找数组第一个是不可能的.因为会把hi div后的所有在此标签里的内容看做文本打出来 ######## </script>
</html>
=================================================================================================================================================
3.通过by name导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="div1">hi div
<div class="div2" name="org">hello div1</div>
<p id="P1" name="org">hello p!</p>
<p>hello pppp!</p> <div class="div2">hello div2</div>
</div> </body>
<script>
var ele=document.getElementsByName("org"); //得到name叫org标签的所有数组
alert(ele[0].innerHTML); // 找出第一个org的标签的文档 hello div1
alert(ele[1].innerHTML); // 找出第一个org的标签的文档 hello p </script>
</html> ===================================== 注: 只有id这个属性是唯一的 ,查找出来的不是数组,其他的方法都需要用数组分析数据 !!======================================= 二, 局部导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello div
<p>hello p</p>
<div class="div1">hello div1
<div>hello div2</div>
</div>
</div>
<script>
var ele=document.getElementsByClassName("div1")[0]; // 获得 class 叫div下的的标签数组的第一个 全局查找
alert(ele.innerHTML); // 得到的是标签里包含的所有内容 包括子级标签!
var inner=ele.getElementsByTagName("div")[0]; //获得里面的第一个div标签 局部查找
alert(inner.innerHTML); // 获得的是 hello div2
</script>
</body>
</html>
============================ 注: 局部查找这个例子里用的是CLASS属性,还可以用的是getelementbytagname, byname 和 byid 都不能用 !==================================================
js 标签属性与导航的更多相关文章
- Js与标签属性
关于在JS中设置标签属性 2017-10-09 23:04 by 清风221, 12790 阅读, 0 评论, 收藏, 编辑 Attribute 该属性主要是用来在标签行内样式,添加.删除.获取属性. ...
- 关于在JS中设置标签属性
Attribute 该属性主要是用来在标签行内样式,添加.删除.获取属性.且适用于自定义属性. setAttribute("属性名",属性值“”):这个是用来设置标签属性的: re ...
- JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型
基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...
- js拼接url以及为html某标签属性赋值
记录 js拼接url 比如有些时候我们需要为某按钮实现跳转,可以利用下面的方式做到: function ReturnIndex() { var rex = RegExp("tools&quo ...
- html页面中插入html的标签,JS控制标签属性
html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
- html标签属性（attribute）和dom元素的属性（property）
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
- Html 改变原有标签属性
内容简要: 当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签 例:当订单状体编程已支付的时 ...
- 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <au ...
随机推荐
- ECS服务里或者阿里云服务器的二级域名设置方法
我们要实现的效果是,xuxinshuai.abc.com ,具体怎么实现,看下面的流程 第一步:备案域名要有,假如就是www.abc.com 第二步:网站的服务器是IIS的情况下,在部署网站时,需要设 ...
- #论文笔记# [pix2pixHD] High-Resolution Image Synthesis and Semantic Manipulation with Conditional GANs
Ting-Chun Wang, Ming-Yu Liu, Jun-Yan Zhu, Andrew Tao, Jan Kautz, and Bryan Catanzaro. "High-Res ...
- OOP2(虚函数/抽象基类/访问控制与继承)
通常情况下,如果我们不适用某个函数,则无需为该函数提供定义.但我们必须为每个虚函数都提供定义而不管它是否被用到了,这因为连编译器也无法确定到底会适用哪个虚函数 对虚函数的调用可能在运行时才被解析: 当 ...
- &(引用) 和 *(指针)
引用: 引用相当于给引用的对象起一个别名,对引用的操作即是对原对象的操作. 使用方式: int cnt = 1024; int &x = cnt; 一般情况下引用的类型要和被引用对象一致(例外 ...
- Maven配置与安装
最近重装了一下系统,便重新安装与配置了maven,记录这个过程并分享出来. 注意:maven安装需要Java依赖,我这里使用的是jdk1.8. 1.安装并配置环境变量 首先在 maven 官网下载 m ...
- 2018数学建模A题优秀论文：高温作业专用服装设计
高温作业专用服装设计 摘 要 本文针对多层材料的高温作业服装的传热问题进行研究,综合考虑多种传热方式建立传热模型,并以此模型为基础解决了服装设计中各层材料最佳厚度的问题. 对于问题一,要求在热物性系数 ...
- Python登陆人人网
#!coding:utf-8 import urllib2 import urllib import cookielib def renrenBrower(url,user,password): #登 ...
- JSON的key值为数字时如何使用
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript(Standard ECMA-262 ...
- 洛谷 P1111 修复公路（最小生成树）
嗯... 题目链接:https://www.luogu.org/problemnew/show/P1111 这道题的关键是读懂题: 首先根据题中的一些扎眼的字眼我们可以判断这是一道用最小生成树来做的题 ...
- CDN基本原理和功能浅析
CDN的全称是Content Delivery Network,即内容分发网络.CDN的通俗理解就是网站加速,CPU均衡负载,可以解决跨运营商,跨地区,服务器负载能力过低,带宽过少等带来的网站打开速度 ...