js中获取父节点,兄弟节点及处理属性节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getDom01(){
var div = document.querySelector(".box"); //得到属性 class属性
console.log(div.className);
//得到的是值
console.log(div.getAttribute("class"));
//得到集合
var attrs = div.attributes;
for(var i=0;i<attrs.length;i++){
var attr = attrs[0];
console.log(attr.value);
} console.log("--------------------");
console.log(div.nodeName);
console.log(div.nodeType);
console.log(div.nodeValue); //console.log(div)
} function setAttr(){
var div = document.querySelector(".box");
div['test'] = "ttttt";
//设置属性的值
div.setAttribute("testtest","tttttt");
//div.setAttribute("name","divdiv");
div.name = "divdiv";
div.removeAttribute("name");
} function setTextText(){
var div = document.querySelector(".box");
//console.log(div.textContent)
console.log(div.innerHTML);
//改变文本里面的额内容
div.innerHTML = "<h1>this is a innerHTML test</h1>";
} /**
*
* 元素节点 属性节点 文本节点
*
* NodeName 元素名 属性名 #text
*
* NodeType 1 2 3
*
* NodeValue null 属性值 文本内容
*
*/ //得到所有的子元素
function getChilds(_parent){
var childs = [];
if(_parent){
var child = _parent.childNodes;
for(var i=0;i<child.length;i++){
var c = child[i];
if(c.nodeType === 1){
childs.push(c);
}
}
}
return childs;
} function testGetChilds(){
var childs = getChilds(document.querySelector(".box"));
console.log(childs)
}
/**
* 通用的得到上一个下一个元素
*/
function getSibling(_dom,sibling){
if(_dom){
sibling = sibling || "nextSibling";
_dom = _dom[sibling];
while(_dom && _dom.nodeType != 1) {
_dom = _dom[sibling];
}
return _dom;
}
return null;
} //得到同级的下一个元素
function getNextSibling(_dom){
if(_dom){
_dom = _dom.nextSibling;
while(_dom.nodeType != 1){
_dom = _dom.nextSibling;
}
return _dom;
}
return null;
} function testGetSibling(){
console.log(getSibling(document.querySelector(".box"),"previousSibling"))
}
//获取上一个节点
function getPreviousSibling(_dom){
return getSibling(_dom,"previousSibling");
} function testStyle(){
var div = document.querySelector("#box2");
div.style.border = "1px solid red";
}
function testStyle1(){
var div = document.querySelector("#box2");
//改变样式的注意事项
//当不是一个规则单词的时候
div.style.border = "none";
//用中括号赋值
div.style["margin-left"] = "10px";
//满足驼峰命名
div.style.marginRight = "20px";
} </script>
</head>
<body>
<input type="button" onclick="getDom01()" value="getDom01"/>
<input type="button" onclick="setAttr()" value="setAttr"/>
<input type="button" onclick="setTextText()" value="setTextText"/>
<input type="button" onclick="testGetChilds()" value="testGetChilds"/>
<input type="button" onclick="testGetSibling()" value="testGetSibling"/>
<input type="button" onclick="testStyle()" value="testStyle"/>
<input type="button" onclick="testStyle1()" value="testStyle1"/>
<hr/>
<div class="box" name="div">
<div id="box1" style="">
<span>this is a span in div 1</span>
<span>this is a span in div 2</span>
</div>
<div id="box2">
<span>this is a span in div 1</span>
<span>this is a span in div 2</span>
</div>
<div id="box3">
<span>this is a span in div 1</span>
<span>this is a span in div 2</span>
</div>
<div id="box4">
<span>this is a span in div 1</span>
<span>this is a span in div 2</span>
</div>
</div>
</body>
</html>
js中获取父节点,兄弟节点及处理属性节点的更多相关文章
- js中获取 table节点各tr及td的内容方法
js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window ...
- js获取iframe中的元素以及在iframe中获取父级的元素(包括iframe中不存在name和id的情况)
第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- js中获取URL中指定的查询字符串
js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- 【2017-06-27】Js中获取地址栏参数、Js中字符串截取
一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...
- 小程序 js中获取时间new date()的用法(网络复制过来自用)
js中获取时间new date()的用法 获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获 ...
随机推荐
- Java Web编程的主要组件技术——Hibernate核心组件
参考书籍:<J2EE开源编程精要15讲> Hibernate配置文件 1) hibernate.cfg.xml <?xml version='1.0' encoding='UTF-8 ...
- Hadoop生态系统介绍
Hadoop生态系统Hadoop1.x 的各项目介绍1. HDFS2. MapReduce3. Hive4. Pig5. Mahout6. ZooKeeper7. HBase8. Sqoop9. Fl ...
- 使用java.net.URLConnection发送http请求
首先,这个需要一点HTTP基础,可以先看个书了解下,我看的<http权威指南>的前4章,后面道行不够看不下去. 然后我们的是java.net的接口: 几个类的API: package co ...
- idea如何热部署(转)
IntelliJ IDEA 怎么热部署,每次修改java文件就得重启tomcat 原文链接:http://blog.csdn.net/dandandeshangni/article/details/ ...
- SSRS实现 矩阵列实现动态列
需求背景:按区域查询店铺的销售量和库存量,然后店铺的数据是动态的.实现类似效果如下图,其中蓝色框是动态的,店铺的数量是不确定的,可能是3个,也可能是20个. 步骤一: 步骤二: 加工后: 最后效果:
- CentOS怎样安装Python3.6
yum install -y openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel安装可能用到的依赖 ...
- Java第三次作业--面向对象基础(封装)
Deadline: 2017-4-6 23:00 一.学习要点 认真看书并查阅相关资料,掌握以下内容: 掌握简单类的设计 掌握利用对象引用建立类与类之间的联系 掌握this关键字 掌握static关键 ...
- A Simple Makefile Tutorial
A Simple Makefile Tutorial A Simple Makefile Tutorial: http://www.cs.colby.edu/maxwell/courses/tutor ...
- ubuntu遇到的问题
昨天分辨率在装一个游戏时被更改了,改过之后,怎么都改不过来... 折腾了一下午,在配置文件中/etc/X11/xorg.conf.failsafe,但是网上都是/etc/X11/xorg.conf, ...
- C# List的深复制
1.关于深拷贝和浅拷贝 C#支持两种类型:值类型和引用类型 值类型(Value Type):如 char, int, float,枚举类型和结构类型 引用类型(Reference Type):如Cla ...