js中的DOM操作(1)
一、操作子节点
childNodes
通过该方式可以获取父节点下的所有子节点，但是由于浏览器的差异，这写节点中可能包含文本节点。
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function (){
var oUl = document.getElementById('ul1');
alert(oUl.childNodes.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
我们通过浏览器打开上面的代码会发现提示框是5。这是因为 ul 标签中的空白处可以被视为文本节点。如果只直接访问 li 节点则需要进行节点类型判断。
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function (){
var j=0;
var node;
var oUl = document.getElementById('ul1');
for(i=0; i<oUl.childNodes.length; i++){
//1表示该节点是一个元素节点
if(oUl.childNodes[i].nodeType == 1)
j++;
}
alert(j);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
children
通过该方法可以直接获取父节点下的元素节点
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function (){
var oUl = document.getElementById('ul1');
alert(oUl.children.length);
oUl.children[0].style.background = "red";
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
firstChild和 lastChild是分别访问子标签中的第一个节点和最好一个节点，不过可能会出现问题就是访问到的可能是元素节点。
二、操作父节点
parentNode
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function(){
var oAs = document.getElementsByTagName('a');
for(var i=0; i<oAs.length; i++){
oAs[i].onclick = function (){
this.parentNode.style.display = "none";
};
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><a href ="javascript:void(0);">隐藏</a></li>
<li><a href="javascript:void(0);">隐藏</a></li>
</ul>
</body>
</html>
通过上面的方式可以让父节点隐藏
offsetParent
寻找脱离文档流的父节点(使用了绝对定位或相对定位的父节点)
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div2');
oDiv.offsetParent.style.backgroundColor="yellow";
}
</script>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: relative;
} #div2{
width: 100px;
height: 100px;
position: absolute;
top: 20px;
left: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
如果去掉#div1中的position属性，则整个body的背景会变为黄色，如果不去则只有div1的背景是黄色
setAttribute
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('1');
oBtn.onclick = function (){
var oInput = document.getElementById('2');
oInput.setAttribute("value", "div2");
}
}
</script>
</head>
<body>
<input type="text" id="2">
<button id="1">按键</button>
</div>
</body>
</html>
setAttribute方法有很多限制，如果允许的话最好选择JQuery中的attr方法。removeAttribute移除某个属性，获取属性值getAttribute。
className
<!DOCTYPE html>
<html>
<head>
<title>json</title>
<script type="text/javascript">
function getByClass(oParent, className){
var result = [];
var oTags = oParent.getElementsByTagName("*");
for(var i=0; i<oTags.length; i++){
if(oTags[i].className == className)
result.push(oTags[i]);
}
return result;
}
window.onload = function(){
var oUl = document.getElementById('ul');
var cboxes = getByClass(oUl, "box");
for(var i=0; i<cboxes.length; i++)
cboxes[i].style.backgroundColor = "red";
}
</script>
</head>
<body>
<ul id="ul">
<li class="box">1</li>
<li>2</li>
<li class="box">32</li>
<li class="box">4</li>
</ul>
</div>
</body>
</html>
className用于判断标签使用的类选择器
js中的DOM操作(1)的更多相关文章
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
- ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- js中的DOM操作(2)
1.表格的更加与删除 <!DOCTYPE html> <html> <head> <title>表格操作</title> <style ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
随机推荐
- sql server 之函数小技巧 && 整数类型为空是用空字符串替代实现
1.判空函数 说明:使用指定的替换值替换 NULL. 语法:ISNULL ( check_expression , replacement_value ) 参数: check_expression:将 ...
- HTTP Content-type
文件扩展名 Content-Type 文件扩展名 Content-Type .* application/octet-stream .tif image/tiff .001 applicat ...
- cnblogs美化及插件
1.vp计数 http://www.amazingcounters.com 2.来源地图 http://clustrmaps.com 2.1来源地图 http://www.flagcounter.co ...
- UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
- 边工作边刷题：70天一遍leetcode: day 71-3
Two Sum I/II/III 要点:都是简单题,III就要注意如果value-num==num的情况,所以要count,并且count>1 https://repl.it/CrZG 错误点: ...
- 2014 Super Training #10 D 花生的序列 --DP
原题: FZU 2170 http://acm.fzu.edu.cn/problem.php?pid=2170 这题确实是当时没读懂题目,连样例都没想通,所以没做了,所以还是感觉这样散漫的做不好,有些 ...
- HDU 1850 Being a Good Boy in Spring Festival
此题先考虑第一种,5 7 9的情况,先手如果想赢,则必定要把异或值变为0,因为随便取,所以此处的异或指的是对堆中的石子数进行异或,而非异或其SG函数. 首先7^9=14,因为要异或为0,则5要变成14 ...
- Unity3D多人协作开发环境搭建
多人协作 说到多人协作开发,大家都会想到要使用版本控制工具来管理项目,当然最常用的要数SVN和Git了,但是SVN管理Unity3D项目的确有一些不尽人意的地方. 比如:两个人修改了同一个场景,SVN ...
- linux下查找某个目录下包含某个字符串的文件
有时候要找一些字符串,但是又不知道在哪个文件,只记得一些字符串 那么如何在linux下寻找包含某段文字的文件呢? 强大的find命令可以帮你完成不可能的任务. 比如我只记得我的程序里包含唯一的字符串“ ...
- ［转］Rapid Reporter——轻量级ET测试记录工具
下载地址:http://testing.gershon.info/reporter/ 特别感谢:邰晓梅老师 在一次ET的在线培训课程,邰晓梅老师使用的是这个工具. Rapid Reproter,是一款 ...