原生JS实现几个常用DOM操作API实例
作者:jingxian 发布时间:2024-04-25 13:09:27
标签:原生js,dom
原生实现jQuery的sibling方法
<body>
<span>我是span标签</span>
<div>我是一个div</div>
<h1 id="h1">我是标题</h1>
<p>我是一个段落</p>
<script type="text/javascript">
//获取元素的兄弟节点
function siblings(o){//参数o就是想取谁的兄弟节点,就把那个元素传进去
var a = [];//定义一个数组,用来存储o的兄弟元素
//previousSibling返回位于相同节点树层级的前一个元素
var p = o.previousSibling;
while(p){//先取o的前面的兄弟元素 判断有没有上一个兄弟元素,如果有则往下执行,p表示previousSibling
if(p.nodeType === 1){
a.push(p);
}
p = p.previousSibling//最后把上一个节点赋给p
}
a.reverse();//把顺序反转一下,这样元素的顺序就是按先后的了
//nextSibling返回位于相同节点树层级的下一个节点
var n = o.nextSibling;//再取o下面的兄弟元素
while(n){//判断有没有下一个兄弟结点,n是nextSibling的意思
if(n.nodeType === 1){//判断是否是元素节点
a.push(n);
}
n = n.nextSibling;
}
return a//最后按从老大到老小的顺序,把这一组元素返回
}
var oH = document.getElementById("h1");
console.log(siblings(oH));//[span, div, p, script]
</script>
</body>
原生实现jQuery的class选择器
//用数组模拟jQuery的class选择器
function getClassName(ParentId,NewClassName){
var AllClassElem = ParentId.getElementsByTagName(“*”);
var AllClass = [];
var i=0;
for(var i=0; i<AllClassElem.length; i++){
if(AllClassElem[i].className == NewClassName){
AllClass.push(AllClassElem[i]);
}
}
return AllClass;
}
//用法:
var PElementId=document.getElementById("bar");
var buttons = getClassName(PElementId,"sco");
//取id="bar"下class="sco"的元素;
getElementsByClassName()
/**
* 获取指定类名的元素对象集合
* @param {Object} node 父节点
* @param {String} classname 指定类名
* @return {[Object]}目标对象集合
*/
function getElementsByClassName(node,classname) {
//如果浏览器支持则直接使用
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
addLoadEvent()
/**
* 方便的将在文档加载后运行的函数添加到window.onload中
* @param {function} func 待运行函数
*/
function addLoadEvent(func){
var oldOnload = window.onload;
//typeof 返回String类型
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldOnload();
func();
}
}
}
addClass()
/**
* 为指定元素结点添加新类名
* element 元素结点
* value 类名
*/
function addClass(element,value){
//如果元素类名为空,直接将value赋值给相应的元素类名
if(!element.className){
element.className = value;
}else{
//否则需要将类名之间用空格隔开
newClassName = element.className;
//多个类名间添加空格
newClassName += ' ';
newClassName += value;
element.className = newClassName;
}
}
insertAfter()
/**
* 在目标元素结点后面插入新的元素结点
* newElement 待插入的新元素结点
* targetElement 目标元素结点
*/
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
getNextElement()
/**
* 获取下一个元素结点
* @param {Object} node 兄结点
* @return {Object || null}下一个元素结点或未获取到
*/
function getNextElement(node){
var sibNode = node.nextSibling;
if (sibNode.nodeType == 1) {
return node;
}
if (sibNode.nextSibling) {
//递归调用
return getNextElement(node.nextSibling);
}
return null;
}
0
投稿
猜你喜欢
- 项目中使用的日志库是使用python官方库logging封装的,但是居然一直么有设置日志自动滚动,经常会受到告警说哪台机器磁盘空间又满,清理
- 本文主要介绍Python3.6及TensorFlow的安装和配置流程。一、Python官网下载自己电脑和系统对应的Python安装包。&nb
- Next()方法在中间件中调用 next() 方法,会从 next() 方法调用的地方跳转到Handler函数Handler函数执行完成,若
- 前言: 有时候,一个数据库有多个帐号,包括数据库管理员,开发人员,运维支撑人员等,可能有很多帐号都有比较大的权限,例如DDL操作权限(创建,
- 什么是SQL?SQL是一种用于操作数据库的语言。SQL是用于所有数据库的基本语言。不同数据库之间存在较小的语法更改,但基本的SQL语法基本保
- 什么是运行时配置(Runtime Configuration,rc)Matplotlib使用matplotlibrc配置文件来自定义图形的各
- isNaN函数 返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。 NaN 即 Not a Number isN
- <?php function genpage(&$sql,$page_size=10) { global $pages,$su
- 1 squeeze(): 去除size为1的维度,包括行和列。至于维度大于等于2时,squeeze()不起作用。行、例:>>&g
- 引言简单来说,回表就是 MySQL 要先查询到主键索引,然后再用主键索引定位到数据。下面,对一些问题进行分析与回答:什么是聚簇索引?什么是非
- 一.打包Flask项目1.1自己写个Flask1.2 下载pyinstallerpip install pyinstaller可选参数示例说
- template代码:<template> <div class="hello"> <ul
- 如下所示:# coding:utf-8import shapefilew = shapefile.Writer()w.autoBalance
- 我就废话不多说了,大家还是直接看代码吧!from tensorflow.python.keras.models import Sequent
- asyncio在Python 2的时代,高性能的网络编程主要是使用Twisted、Tornado和Gevent这三个库,但是它们的异步代码相
- 一,编程环境PyCharm2016,Anaconda3 Python3.6需要安装schedule模块,该模块网址:https://pypi
- python条件语句使用 if 表达式,难度不高,需要注意的是嵌套用法,以及如何设置对应的条件。if 条件判断语句python 语句是按固定
- 1.如何将Query String传送到另一个ASP文件去?Response.Redirect("second.asp? 
- 这篇论坛文章详细介绍了完全卸载MySQL数据库5.0的具体方法,更多内容请参考下文:数据库突然出了问题,没办法只能重装,因为事先并不知道My
- 在使用FCKeditor的时候,可能会碰到以下这个问题,就是在编辑器页面出错,提示为:找不到页面/fckeditor/editor/fcke