Javascript DOM基础（二） childNodes、children
childNodes知识点：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() { var oUl = document.getElementById('ul1'); /*
元素.childNodes : 只读 属性 子节点列表集合
标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点
非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点 childNodes只包含一级子节点，不包含后辈孙级以下的节点 DOM节点的类型有很多种 12种 元素.nodeType : 只读 属性 当前元素的节点类型 元素节点 : 1
属性节点 : 2
文本节点 : 3
注释节点 : 8
文档节点 : 9
*/ alert( oUl.childNodes.length ); //alert( oUl.nodeType ); //alert(oUl.childNodes[0].nodeType); //属性
// 元素.attributes : 只读 属性 属性列表集合 //alert( oUl.attributes.length ); //alert( oUl.attributes[0].nodeType ); for (var i=0; i<oUl.childNodes.length; i++) { if ( oUl.childNodes[i].nodeType == 1 ) {
oUl.childNodes[i].style.background = 'red';
} } }
</script>
</head> <body>
<ul id="ul1" style="border: 1px solid red;">
<li>11111 <span>span</span></li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<p>pppppppp</p>
</ul>
</body>
</html>
children知识点：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() { var oUl = document.getElementById('ul1'); /*
元素.children : 只读 属性 子节点列表集合
标准下：只包含元素类型的节点
非标准下：只包含元素类型的节点
*/ //alert( oUl.children.length ); for (var i=0; i<oUl.children.length; i++) { oUl.children[i].style.background = 'red'; } }
</script>
</head> <body>
<ul id="ul1" style="border: 1px solid red;">
<li>11111 <span>span</span></li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<p>pppppppp</p>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() { var oUl = document.getElementById('ul1');
/*
元素.firstChild : 只读 属性 第一个子节点
标准下：firstChild会包含文本类型的节点
非标准下：只包含元素节点
元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点
*/ //alert( oUl.firstChild ); //alert( oUl.firstElementChild ); /*if ( oUl.firstElementChild ) {
oUl.firstElementChild.style.background = 'red';
} else {
oUl.firstChild.style.background = 'red';
}*/ var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red'; /*
元素.lastChild || 元素.lastElementChild 最后一个子节点
*/
var oLast = oUl.lastElementChild || oUl.lastChild;
oLast.style.background = 'yellow'; /*
元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
*/
var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
oNext.style.background = 'blue'; /*
元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点
*/
var oPrev = oLast.previousElementSibling || oLast.previousSibling;
oPrev.style.background = 'orange'; }
</script>
</head> <body>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>
</html>
应用 实例：
1.留言板加强
最多只能添加5（自己定）条，最先留的言会被清除
2.为留言添加批量删除
可以点击选择单个留言，点击批量删除按钮，可以删除被选中的留言内容
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() { var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
var oBtn2 = document.getElementById('btn2');
var oUl = document.getElementById('ul1'); oBtn.onclick = function() { /*
document.createElement(标签名称); 创建元素
*/ var oLi = document.createElement('li'); //oLi.innerHTML = oText.value + '<a href="javascript:;">删除</a>';
oLi.innerHTML ='<input type="checkbox" value="" />'+ oText.value; var oA = document.createElement('a');
oA.innerHTML = '删除';
oA.href = 'javascript:;';
oA.onclick = function() { /*
父级.removeChild(要删除的元素); 删除元素
*/ oUl.removeChild( this.parentNode ); } oLi.appendChild( oA ); //添加到页面中
/*
父级.appendChild(要添加的元素) 方法 追加子元素
*/
//oUl.appendChild( oLi ); /*
父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
*/
//oUl.insertBefore( oLi, oUl.children[0] ); if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
if(oUl.children.length>5){
oUl.removeChild( oUl.children[oUl.children.length-1]);
};
} else {
oUl.appendChild( oLi );
}; var aInput=oUl.getElementsByTagName("input"); for(var i=0;i<aInput.length;i++){ aInput[i].index=i;
aInput[i].onOff=true;//为当前表单元素添加一个开关
aInput[i].onclick=function(){ if(aInput[this.index].onOff){//如果当前开关为true
aInput[this.index].value='checkBox';//就为当前 表单 的value值添加check
aInput[this.index].onOff=false;
}else{
aInput[this.index].value='';
aInput[this.index].onOff=true;
};
};
}; oBtn2.onclick=function(){
for(var i=0;i<aInput.length;i++){
if(aInput[i].value=='checkBox'){
oUl.removeChild( aInput[i].parentNode );
};
};
}; }; }
</script>
</head> <body>
<input type="text" id="text1" /><input type="button" value="留言" id="btn" />
<ul id="ul1"></ul>
<input type="button" value="删除" id="btn2" />
</body>
</html>
Javascript DOM基础（二） childNodes、children的更多相关文章
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- JavaScript DOM基础总结
上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- JavaScript(DOM编程二)
文档加载完毕之后,在Window.onload方法中创建元素节点,添加到DOM文档中 代码演示: <html> <head lang="en"> <m ...
- javascript DOM基础操作
DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...
- JS基础---->javascript的基础(二)
记载javascript的一些基础的知识.我们在春风秋雨中无话不说,又在春去秋来中失去了联系. js中string类型 一.字符方法:charAt() 和 charCodeAt() var strin ...
- JavaScript Dom基础
一.DOM查找 1.document.getElementById("id") -功能:返回对拥有指定ID的第一个对象的引用 -返回值:DOM对象 -说明:id为DOM元素上id属 ...
- JavaScript学习 - 基础(二) - 基础类型/类型转换
基础类型 - 数字类型(Number) 1.最基本的数据类型 2.不区分整型数值和浮点型数值 3.所有数字采用64位浮点格式存储,相当于Java和C语言中double格式 4.能表示的最大值 +- 1 ...
随机推荐
- 关于NSLog
#ifdef __OBJC__#ifdef DEBUG#define NSLog(fmt,...) NSlog((@"%s [Line %d]" fmt),__PRETTY_FUN ...
- python 学习笔记八 进程和线程 （进阶篇）
什么是线程(thread)? 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执 ...
- Android 坐标系统
屏幕的左上角是坐标系统原点(0,0),原点向右延伸是X轴正方向,原点向下延伸是Y轴正方向. 一.View的坐标 需要注意view的坐标是相对父容器而言的,包括:getTop().getBott ...
- Hosts文件的使用
hosts文件是什么?在哪里?hosts文件:系统文件,可以记事本打开并编辑.一般用于域名到ip地址的解析.当用户在浏览器中输入网络的域名时,系统首先会自动从hosts文件中找到对应的ip地址,一旦找 ...
- ubuntu14.04 64bit安装teamviewer
1.下载teamviewer,链接如下: http://downloadus2.teamviewer.com/download/version_10x/teamviewer_10.0.36281_i3 ...
- Java使用BigDecimal精确计算的简单公式计算器
由于工作需要,写了一个使用BigDecimal运算的精确计算的计算器(然后发现其实比不用BigDecimal的并好不到哪里去) 只能做加减乘除 double类型的数字在千万级别的时候会转成科学计数法, ...
- （原创）详解Quartus导出网表文件：.qxp和.vqm
当项目过程中,不想给甲方源码时,该如何?我们可以用网表文件qxp或者vqm对资源进行保护. 下面讲解这两个文件的具体生成步骤: 一.基本概念 QuartusII的qxp文件为QuartusII Exp ...
- Trick
1. var b = a.slice(beginIndex,endIndex); [].slice.call( [] ) Array.prototype.slice.call([]) will cop ...
- [Oracle] SQL*Loader 详细使用教程（4）- 字段列表
在上一篇中我们介绍了SQL*Loader中最重要的文件——控制文件,而本篇要介绍控制文件中最重要的部分——字段列表,字段列表的作用是把数据文件中的记录和数据库中表的列对应起来,下面是字段列表的一个例子 ...
- shell脚本操作mysql数据库
shell脚本操作mysql数据库,使用mysql的-e参数可以执行各种sql的(创建,删除,增,删,改.查)等各种操作 mysql -hhostname -Pport -uusername -pp ...