节点(node)操作
一、节点的属性
- 节点值页面中的所有内容,包括标签、属性、文本
- nodeType,节点类型:如果是标签,则是1;如果是属性。则是2;如果是文本,则是3
- nodeName,节点名字:如果是标签,则是大写的标签,如果是属性,则是小写的属性;如果是文本,则是#text
- nodeValue,节点的值:如果是标签,则是null;如果是属性,则是属性值;如果是文本,则是文本内容
<p>我是一个p</p>
<div style="color: yellow">我是一个div</div>
<span>我是一个span</span>
<script>
//如果节点是标签
console.log(document.getElementsByTagName("p")[0].nodeType);//1
console.log(document.getElementsByTagName("p")[0].nodeName);//P-----大写
console.log(document.getElementsByTagName("p")[0].nodeValue);//null
//如果节点是属性
console.log(document.getElementsByTagName("div")[0].attributes[0].nodeType);//2
console.log(document.getElementsByTagName("div")[0].attributes[0].nodeName);//style-----小写
console.log(document.getElementsByTagName("div")[0].attributes[0].nodeValue);//color: yellow-----值
//如果节点是文本
console.log(document.getElementsByTagName("span")[0].childNodes[0].nodeType);//3
console.log(document.getElementsByTagName("span")[0].childNodes[0].nodeName);//#text
console.log(document.getElementsByTagName("span")[0].childNodes[0].nodeValue);//我是一个span-----值
</script>
二、获取节点和元素(12行代码)
<div>
<p>我是一个p</p>
<div>我是一个div</div>
<ul id="uu">
<li>第1个li</li>
<li>第2个li</li>
<li id="three">第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
</ul>
<span>我是一个span</span>
</div>
<script>
//获取标签ul
var ulobj=document.getElementById("uu");
//1.父级节点
console.log(ulobj.parentNode);//div
//2.父级元素
console.log(ulobj.parentElement);//div
//3.子节点
console.log(ulobj.childNodes);//[text, li, text, li, text, li#three, text, li, text, li, text]
//4.子元素
console.log(ulobj.children);//[li, li, li#three, li, li]
//5.第一个子节点
console.log(ulobj.firstChild);//#text
//6.第一个子元素
console.log(ulobj.firstElementChild);//li
//7.最后一个子节点
console.log(ulobj.lastChild);//#text
//8.最后一个子元素
console.log(ulobj.lastElementChild);//li
//9. 某一个元素的前一个兄弟节点
console.log(document.getElementById("three").previousSibling);//#text
//10.某一个元素的前一个兄弟元素
console.log(document.getElementById("three").previousElementSibling);//li
//11.某一个元素的后一个兄弟节点
console.log(document.getElementById("three").nextSibling);//#text
//12.某一个元素的后一个兄弟元素
console.log(document.getElementById("three").nextElementSibling);//li
</script>
总结:凡是获取节点的代码,谷歌和火狐浏览器得到的都是相关节点,凡是获取元素的代码,在谷歌和火狐浏览器得到的都是相关的元素,
但是,从子节点和兄弟开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,得到的是undefined(表示不支持)
兼容性代码见案例3
三、案例
<!-- 例1:点击按钮设置div中p标签改变背景颜色 -->
<input type="button" value="改变颜色" id="btn">
<div id="dv">
<span>我是一个span</span>
<a href="#">我是一个链接</a>
<p>我是一个p</p>
<h5>我是一个\(^o^)/~</h5>
<div>我是一个div</div>
</div>
<script>
document.getElementById("btn").onclick=function(){
//获取里面所有的字节点,返回一个数组
var nodes=document.getElementById("dv").childNodes;
//循环遍历所有的子节点
for(var i=0;i<nodes.length;i++){
//判断这个子节点是不是p标签
if(nodes[i].nodeType==1&&nodes[i].nodeName=="P"){
nodes[i].style.backgroundColor="yellow";
}
}
};
</script>
<!-- 例2:节点操作隔行变色 -->
<input type="button" value="变色" id="btn">
<ul id="uu">
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
<script>
document.getElementById("btn").onclick=function(){
//记录有多少个li
var count=0;
//获取ul所有的子节点
var nodes=document.getElementById("uu").childNodes
console.log(nodes);
//循环遍历这些节点
for(var i=0;i<nodes.length;i++){
//判断这个节点是不是li节点
if(nodes[i].nodeType==1&&nodes[i].nodeName=="LI"){
nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
count++;//记录出现li的次数
}
}
};
</script>
<script>
//element.firstChild------>谷歌和火狐获取的第一个子节点
//element.firstChild------>IE8获取的第一个子元素
//element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
//例3-1:获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element){
if(element.firstElementChild){//支持
return element.firstElementChild;
}else{
var node=element.firstChild;//第一个子节点
while(node&&node.nodeType!=1){//存在,并且不是标签
node=node.nextSibling;//循环下一个节点,直到是标签,跳出循环
}
return node;//返回一个是标签的节点(即是元素了)
}
}
//例3-2:获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element){
if(element.lastElementChild){
return element.lastElementChild;
}else{
var node=element.lastChild;
while(node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
//例3-3:获取任意一个元素的后一个兄弟元素
function getNextElementSibling(element){
if(element.nextElementSibling){
return element.nextElementSibling;
}else{
var node=element.nextSibling;
while(node&&element.nodeType!=1){
node=node.nextSibling;
}
return node;
}
}
//例3-4:获取任意一个元素的前一个兄弟元素
function getpreviousElementSibling(element){
if(element.previousElementSibling){
return element.previousElementSibling;
}else{
var node=element.previousSibling;
while(node&&element.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
</script>
<!-- 例4:点击小图,切换背景图片 -->
<div id="mask">
<img src="1big.png" alt="" width="100">
<img src="2big.png" alt="" width="100">
</div>
<script>
//获取所有的子元素
var imgobjs=document.getElementById("mask").children;
//循环遍历所有的img,注册点击事件
for(var i=0;i<imgobjs.length;i++){
imgobjs[i].onclick=function(){
document.body.style.backgroundImage="url("+this.src+")";//写法:如果里面是变量,内外都是双引号,如果里面是字符串就是写死了,里面是单引号
} }
</script>
<!--例5: 全选和全不选的实现 -->
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td><input type="checkbox" name="" id="tball">全选</td>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>青菜</td>
<td>某某饭店</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>白菜</td>
<td>某某饭店</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>萝卜</td>
<td>某某饭店</td>
</tr>
</tbody>
</table>
<script>
//获取全选的复选框
var ckall=document.getElementById("tball");
//获取tbody的所有的小复选框
var cks=document.getElementById("tb").getElementsByTagName("input");
//点击全选复选框,获取当前的状态,然后设置tbody的所有复选框的状态
ckall.onclick=function(){
for(var i=0;i<cks.length;i++){
cks[i].checked=this.checked;
}
};
//获取tbody的所有复选框,分别注册点击事件
for(var i=0;i<cks.length;i++){
cks[i].onclick=function(){
var flag=true;//默认都被选中
//判断手否所有的复选框都选中
for(var j=0;j<cks.length;j++){
if(cks[j].checked==false){//有一个没选中
flag=false;
break;//跳出这个循环体
}
}
ckall.checked=flag;
};
}
</script>
节点(node)操作的更多相关文章
- TreeView节点拖拉操作1
TreeView节点拖拉操作1 //事先设置 TreeView1.DragMode= dmAutomatic; unit Unit1; interface uses Windows, Me ...
- DOM 节点node
DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构,即在HTML中所有内容都是节点.文档节点是每个文档的根节点,文档节点有一个子节点,称为文档元素.每个文档只能有一个文档元素.在HTM ...
- elasticsearch负载均衡节点——客户端节点 node.master: false node.data: false 其他配置和master 数据节点一样
elasticSearch的配置文件中有2个参数:node.master和node.data.这两个参 数搭配使用时,能够帮助提供服务器性能. 数据节点node.master: false node. ...
- 33. Extjs中的tree节点的操作
转自:https://blog.csdn.net/masterShaw/article/details/51354351?utm_source=blogkpcl9 ext 树节点操作 tree ...
- Linux内存描述之内存节点node–Linux内存管理(二)
日期 内核版本 架构 作者 GitHub CSDN 2016-06-14 Linux-4.7 X86 & arm gatieme LinuxDeviceDrivers Linux内存管理 #1 ...
- Kubernetes Python Client 初体验之node操作
今天讲一下k8s中对于各个实物节点node的操作. 首先是获取所有nodes信息: self.config.kube_config.load_kube_config(config_file=" ...
- Longhorn 企业级云原生分布式容器存储-券(Volume)和节点(Node)
内容来源于官方 Longhorn 1.1.2 英文技术手册. 系列 Longhorn 是什么? Longhorn 云原生分布式块存储解决方案设计架构和概念 Longhorn 企业级云原生容器存储解决方 ...
- dom节点的操作
dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法 $('#div1').ap ...
- openstack中彻底删除计算节点的操作记录
在使用openstack的过程中,我们经常会添加好几台计算节点来部署虚拟机,在后续使用中由于某些原因,一些计算节点出现了问题,需要将这些出了问题的计算节点从openstack的控制节点中踢出去!但是很 ...
随机推荐
- SRID (空间引用识别号, 坐标系)【转】
SRID (空间引用识别号, 坐标系)-云栖社区-阿里云 Spatial Reference List -- Spatial Reference Chapter 8. PostGIS Referenc ...
- Linux下用命令来执行kettle文件资源库的文件ktr与kjb的方法
转载地址: https://blog.csdn.net/zuolovefu/article/details/78083445 1. 准备工作 一个简单的job,一个简单的trans. trans:读取 ...
- Spring BeanFactory 与 FactoryBean 的区别
BeanFactory 和 FactoryBean 都是Spring Beans模块下的接口 BeanFactory是spring简单工厂模式的接口类,spring IOC特性核心类,提供从工厂类中获 ...
- 用Python爬取小说《一念永恒》
我们首先选定从笔趣看网站爬取这本小说. 然后开始分析网页构造,这些与以前的分析过程大同小异,就不再多叙述了,只需要找到几个关键的标签和user-agent基本上就可以了. 那么下面,我们直接来看代码. ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- Vue的学习笔记
以下文章皆为观看慕课网https://www.imooc.com/learn/796中“河畔一角”老师的讲解做的笔记,仅供参考. 一.Vue特点 Vue是MVVM的框架,也就是模型视图->视图模 ...
- QGroupBox
QGroupBox窗口部件提供了一个有标题的组合框 组合框提供一个框架.一个标题和一个键盘快捷键,并且显示在它里面地其它不同窗口部件.标题在上面,键盘快捷键移动键盘焦点到组合框的一个子窗口部件,并且子 ...
- shiro系列五、shiro密码MD5加密
Shiro-密码的MD5加密 1.密码的加密 在数据表中存的密码不应该是123456,而应该是123456加密之后的字符串,而且还要求这个加密算法是不可逆的,即由加密后的字符串不能反推回来原来的密 ...
- 解决npm安装时出现run `npm audit fix` to fix them, or `npm audit` for details 的问题
npm audit fix npm audit fix --force npm audit 按照顺序一一运行亲测完全可用如果还是不行的话,可以把node_modules和package-lock.js ...
- LVS实现健康性检查功能
LVS高可用性 Director不可用,整个系统将不可用:SPoF Single Point of Failure 解决方案:高可用 keepalived heartbeat/corosync 某RS ...