js dom操作获取节点的一些方法
在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码:
//js获取下一个兄弟节点
function getNextSibling(eleObj){
var next = eleObj.nextSibling;
if(next.nodeType == 3){ // 文本节点
return next.nextSibling;
}
return next;
}
//js获取上一个兄弟节点
function getPreviousSibling(eleObj){
var pre = eleObj.previousSibling;
if(pre.nodeType == 3){
return pre.previousSibling;
}
return pre;
}
//js获取所有子节点
function getChildNodes(parentNode){
var childs = [];
for(var i=0; i<parentNode.childNodes.length; i++){
if(parentNode.childNodes[i].nodeType == 1){ // 元素节点
childs.push(parentNode.childNodes[i]);
}
}
return childs;
} //js获取第一个子节点
function getFirstChildNode(parentNode){
var first = parentNode.firstChild;
if(first.nodeType == 3){ // 文本节点
return first.nextSibling;
}
return first;
/*return parentNode.firstElementChild;*/
}
//js获取最后一个子节点
function getLastChildNode(parentNode){
var last = parentNode.lastChild;
if(last.nodeType == 3){
return last.nextSibling;
}
return last;
}
js dom操作获取节点的一些方法的更多相关文章
- dom操作------获取元素的若干方法
// 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- javascript DOM和DOM操作的四种基本方法
在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...
- js如何操作表格(常用属性方法汇总)
js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
- vue怎么不通过dom操作获取dom节点
今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"&g ...
- JavaScript的BOM、DOM操作、节点以及表格(二)
BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成 ...
- javascript dom编程艺术笔记第三章:DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
- JS和jQuery获取节点的兄弟,父级,子级元素
原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...
- js dom 操作技巧
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- Oracle-在线重定义操作文档
Oracle-在线重定义操作文档 2015年10月8日 15:51 在线重定义的大致操作流程如下: (1)创建基础表A,如果存在,就不需要操作. (2)创建临时的分区表B. (3)开始重定义,将基表A ...
- vim备注
① 用户path生效 在~/.bashrc中修改path,在~/.profile中source bashrc ② secureCRT着色方案 底色RGB:43 43 43 前景色RGB:221 221 ...
- 关于C#与.NET Framework
前几天,有一个做测试的问我.NET Framework是什么,和C#是什么关系呢. 下面我就来解释一下.NET Framework是什么:.NET Framework是一个框架,是应用程序运行时所需要 ...
- npm的镜像替换成淘宝
1.得到原本的镜像地址 npm get registry > https://registry.npmjs.org/ 设成淘宝的 npm config set registry http://r ...
- 【BZOJ1050】【枚举+并查集】旅行comf
Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求一条路径,使得路径上最大 ...
- css样式积累
1.圆角: border-radius:16px 16px 16px 16px; 2透明度: filter: alpha(opacity=80); ...
- javascript——面向对象程序设计(2)
<script type="text/javascript"> //1.理解原型对象 //2.原型与in操作符 //3.更简单的原型语法 //4.原型的动态性 //5. ...
- sed 简明教程
做个标记 http://coolshell.cn/articles/9104.html sed全名叫stream editor,流编辑器,用程序的方式来编辑文本,相当的hacker啊.sed基本上就是 ...
- Weinre在iOS 7上不工作的原因
升级到iOS 7 后发现Weinre不能工作了,通过Safari调试发现报错如下: [Error] SecurityError: DOM Exception 18: An attempt was ma ...
- width:100%缩小窗口时背景图片出现空白bug
页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...