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()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- angular.js 字符串
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- hdoj 2041 超级阶梯
代码: #include <stdio.h>int main(){int n;int i;int m;int count;int dp[50];while(scanf("%d&q ...
- 本大神教你用PHP把文本内容转换成16进制数字,进行加密
<?php $a="杨波"; $b = bin2hex($a); echo $a."<br />"; $c = pack("H*&q ...
- 一起来背ABC
construction 构造,结构 constructor 构造函数,施工员
- asp.net将数据导出到excel
本次应用datatable导出,若用gridview(假设gridview设为了分页显示)会出现只导出当前页的情况. protected void btnPrn_Click(object sender ...
- PHPMailer发匿名邮件及Extension missing: openssl的解决
原文链接:http://www.tongfu.info/phpmailer%E5%8F%91%E5%8C%BF%E5%90%8D%E9%82 %AE%E4%BB%B6%E5%8F%8Aextensio ...
- 串行CPU设计
一.概述 串行CPU工作流程 串行CPU的时序流程如下图所示:取指.译码.执行.回写. 其中,取指.回写是与存储器打交道:而译码与执行则是CPU内部自个儿的操作. 我们究竟想要CPU干什么? ...
- Node.js教程
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的服务器端平台.Node.js是由瑞恩·达尔在2009年开发的,它的最新版本是v0.10.36. N ...
- [BZOJ 1026] [SCOI 2009] Windy数 【数位DP】
题目链接:BZOJ - 1026 题目分析 这道题是一道数位DP的基础题,对于完全不会数位DP的我来说也是难题.. 对于询问 [a,b] 的区间的答案,我们对询问进行差分,求 [0,b] - [0,a ...
- SharePoint 2013 WebTemplates
SharePoint 2013 WebTemplates You are here: Home / SharePoint 2013 WebTemplates January 24, 2013 Ta ...