[Javascript] Finding Sibling Elements

const app = document.getElementById(‘app‘);
app.innerHTML = `
  <h1>JavaScript DOM</h1>
  <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
`;

const listItem = document.querySelector(‘#list li‘);

// Any DOM Nodes
console.log(listItem.nextSibling);
console.log(listItem.previousSibling);

// Any Element Nodes
console.log(listItem.nextElementSibling);
console.log(listItem.previousElementSibling);

原文地址:https://www.cnblogs.com/Answer1215/p/12596292.html

时间: 2024-10-13 09:27:34

[Javascript] Finding Sibling Elements的相关文章

[Javascript] Finding Parent Elements

const app = document.getElementById('app'); app.innerHTML = ` <h1>JavaScript DOM</h1> <div class="item"></div> `; const item = document.querySelector('.item'); console.log(item.parentNode); console.log(item.parentElement.

JavaScript :memory leak [转]

Memory leak patterns in JavaScript Handling circular references in JavaScript applications Abhijeet Bhattacharya and Kiran Shivarama SundarPublished on April 24, 2007 FacebookTwitterLinked InGoogle+E-mail this page 6 JavaScript is a powerful scriptin

JavaScript排序算法——堆排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

javascript 原生class操作

<script type="text/javascript"> function hasClass(elements, cName) { return elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)")); //(\\s|^)判断前面是否有空格 (\\s|$)判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断 } function addClas

CMarkUp读写XML(转)

Fast start to XML in C++ Enough bull. You want to create XML or read and find things in XML. All you need to know about CMarkup is that it is just one object per XML document (for the API design concept see EDOM). And by the way the free firstobject

selenium docs

Note to the Reader - Docs Being Revised for Selenium 2.0! Introduction Test Automation for Web Applications To Automate or Not to Automate? Introducing Selenium Brief History of The Selenium Project Selenium’s Tool Suite Choosing Your Selenium Tool S

jQuery核心之jQuery Object及其相关的常用方法

1.jQuery Object 和 原生的DOM对象之间有许多方法是不一样的,用jQuery的方法大部分情况下返回的是jQuery Object,但是jQuery也提供了一些方法可以很轻松的获取原生的DOM对象. 先来看:获取jQuery Object之一, // Selecting only the first <h1> element on the page (in a jQuery object) var headings = $( "h1" ); var first

《深入PHP与jQuery开发》读书笔记——Chapter1

由于去实习过后,发现真正的后台也要懂前端啊,感觉javascript不懂,但是之前用过jQuery感觉不错,很方便,省去了一些内部函数的实现. 看了这一本<深入PHP与jQuery开发>,感觉深入浅出,值得推荐. Chapter1.jQuery简介 1.jQuery工作方式本质 先创建一个jQuery对象实例,然后对传递给该实例的参数表达式求值,最后根据这个值作出相应的响应或者修改自身. 2.利用CSS语法选择dom元素(基本选择器) 我们知道,jQuery说白了就是对网页上的内容进行选择器的

oneuijs/You-Dont-Need-jQuery

oneuijs/You-Dont-Need-jQuery https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用