在复习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操作获取节点的一些方法的更多相关文章

  1. dom操作------获取元素的若干方法

    // 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...

  2. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  3. javascript DOM和DOM操作的四种基本方法

    在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...

  4. js如何操作表格(常用属性方法汇总)

    js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...

  5. vue怎么不通过dom操作获取dom节点

    今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"&g ...

  6. JavaScript的BOM、DOM操作、节点以及表格(二)

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  7. javascript dom编程艺术笔记第三章:DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  8. JS和jQuery获取节点的兄弟,父级,子级元素

    原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...

  9. js dom 操作技巧

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

随机推荐

  1. Oracle-在线重定义操作文档

    Oracle-在线重定义操作文档 2015年10月8日 15:51 在线重定义的大致操作流程如下: (1)创建基础表A,如果存在,就不需要操作. (2)创建临时的分区表B. (3)开始重定义,将基表A ...

  2. vim备注

    ① 用户path生效 在~/.bashrc中修改path,在~/.profile中source bashrc ② secureCRT着色方案 底色RGB:43 43 43 前景色RGB:221 221 ...

  3. 关于C#与.NET Framework

    前几天,有一个做测试的问我.NET Framework是什么,和C#是什么关系呢. 下面我就来解释一下.NET Framework是什么:.NET Framework是一个框架,是应用程序运行时所需要 ...

  4. npm的镜像替换成淘宝

    1.得到原本的镜像地址 npm get registry > https://registry.npmjs.org/ 设成淘宝的 npm config set registry http://r ...

  5. 【BZOJ1050】【枚举+并查集】旅行comf

    Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求一条路径,使得路径上最大 ...

  6. css样式积累

    1.圆角:     border-radius:16px 16px 16px 16px;     2透明度:             filter: alpha(opacity=80);       ...

  7. javascript——面向对象程序设计(2)

    <script type="text/javascript"> //1.理解原型对象 //2.原型与in操作符 //3.更简单的原型语法 //4.原型的动态性 //5. ...

  8. sed 简明教程

    做个标记 http://coolshell.cn/articles/9104.html sed全名叫stream editor,流编辑器,用程序的方式来编辑文本,相当的hacker啊.sed基本上就是 ...

  9. Weinre在iOS 7上不工作的原因

    升级到iOS 7 后发现Weinre不能工作了,通过Safari调试发现报错如下: [Error] SecurityError: DOM Exception 18: An attempt was ma ...

  10. width:100%缩小窗口时背景图片出现空白bug

    页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...