javascript中DOM集锦(二)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("ul1");
var list=oUl.childNodes;
// console.log(list);
var arr=convertToArray(list);
// console.log(arr);
var arrList=getElementList(arr,1);
// console.log(arrList); //使用appendChild添加子节点
var returnNode=oUl.appendChild(arrList[0]);
// alert(returnNode==arrList[0]);
alert(oUl.firstChild.nextSibling);
alert(oUl.firstChild.nextElementSibling);
console.log(oUl.lastChild); //将获得的字节点转为数组
function convertToArray(nodes){
var array=null;
try{
array=Array.prototype.slice.call(nodes,0);
}catch(ex){
array=new Array();
for(var i=0,len=nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
return array;
} //将元素节点加入到数组中
function getElementList(arr,value){
var arrList=new Array();
for(var i=0,len=arr.length;i<len;i++){
if(arr[i].nodeType==value){
arrList.push(arr[i]);
}
}
return arrList;
} }
</script>
</head>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
1、appendChild是给父节点添加子节点,当添加的子节点已经是父节点下的子节点的时候,那么被添加的子节点的原来位置就会被顶上,而新增的子节点会成为父节点下的最后一个子节点。
注:在笔者实际的操作过程中,当使用nextSibling查询某个子节点的兄弟节点的时候,返回的是文本节点,也就是说,谷歌浏览器将文本节点视为一类子节点的集合,所以返回的子节点就是本文节点,而使用nextElementSibling返回的则是元素节点,不过这个属性在IE下是不起作用的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload=function(){var oUl=document.getElementById("ul1");var list=oUl.childNodes;// console.log(list);var arr=convertToArray(list);// console.log(arr);var arrList=getElementList(arr,1);// console.log(arrList);
//使用appendChild添加子节点var returnNode=oUl.appendChild(arrList[0]);// alert(returnNode==arrList[0]);alert(oUl.firstChild.nextSibling);alert(oUl.firstChild.nextElementSibling);console.log(oUl.lastChild);
//将获得的字节点转为数组function convertToArray(nodes){var array=null;try{array=Array.prototype.slice.call(nodes,0);}catch(ex){array=new Array();for(var i=0,len=nodes.length;i<len;i++){array.push(nodes[i]);}}return array;}
//将元素节点加入到数组中function getElementList(arr,value){var arrList=new Array();for(var i=0,len=arr.length;i<len;i++){if(arr[i].nodeType==value){arrList.push(arr[i]);}}return arrList;}
}</script></head><body><ul id="ul1"><li>111</li><li>222</li><li>333</li></ul></body></html>
javascript中DOM集锦(二)的更多相关文章
- day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript中DOM的层次节点(一)
DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...
- js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
- JAVAScript中DOM与BOM的差异分析
JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...
- JavaScript中DOM查询封装函数
在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...
- JavaScript中的类型转换(二)
说明: 本篇主要讨论JavaScript中各运算符对运算数进行的类型转换的影响,本文中所提到的对象类型仅指JavaScript预定义的类型和程序员自己实现的对象,不包括宿主环境定义的特殊对象(比如浏览 ...
- javascript中DOM部分基础知识总结
1.DOM介绍 1.1 DOM概念 文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. ...
- javascript之DOM篇二(操作)
一.创建DOM元素 createElement:document.createElement(' 所要创建的元素标签名'): <!DOCTYPE html><html>< ...
随机推荐
- C语言格式化输入输出
%i和%d之间的区别 作为匹配整数的转换说明,printf格式串中两者并没有区别,但是在scanf格式串中%d只能匹配十位制整数,而%i可以匹配八进制(前缀为0,如086).十进制或十六进制(前缀0x ...
- js 中采用词法作用域
所谓的 词法( 代码 )作用域, 就是代码在编写过程中体现出来的作用范围. 代码一旦写好, 不用执行, 作用范围就已经确定好了. 这个就是所谓词法作用域. 在 js 中词法作用域规则: 1.函数允许访 ...
- Linux — 用户组、权限
Linux 用户组分为:所有者.所在组.其他组 所有者:谁创建,谁是所有者.命令:ls -al 所在组:当创建文件或者文件夹时,这个文件或者文件夹所分配到的用户组,这样就会有效地隔离文件. 其他组:和 ...
- grunt之connect、watch
先说下这两个插件配合的用处,简单的说,它们可以拯救你的F5.connect用于建立一个静态服务器,watch监听文件的修改并自动实时刷新浏览器的页面. 还是options走起. connect(V0. ...
- Python中os和shutil模块实用方法集锦
Python中os和shutil模块实用方法集锦 类型:转载 时间:2014-05-13 这篇文章主要介绍了Python中os和shutil模块实用方法集锦,需要的朋友可以参考下 复制代码代码如下: ...
- 超级简单实用的前端必备技能-javascript-全屏滚动插件
fullPage.js fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 本章内容将详细介绍Android事件的具体处理及常见事件. 主要功能 支持 ...
- 201521123084 《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自 ...
- 个人作业1——四则运算题目生成程序(基于C++)
题目描述: 从<构建之法>第一章的 "程序" 例子出发,像阿超那样,花二十分钟写一个能自动生成小学四则运算题目的命令行 "软件",满足以下需求: 1 ...
- 结对作业-基于GUI的四则运算
一.需求分析 1.题目要求: 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linux,web ...
- 201521123080《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 流(Stream): Stream是从起源(source)到接收(sink)的有序数据 按照流向分可以分为输入 ...