JavaScript 查找元素

查询单个元素document.getElementById

示例

<!DOCTYPE html>

<html>

<head>

<title>访问元素</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.mycolor{

color:#fff;

}

</style>

</head>

<body>

<ul id="ul">

<li id="a">油条</li>

<li id="b">包子</li>

<li id="c">米饺</li>

<li id="d"><a>鱼粉</a></li>

</ul>

<script>

// 返回单一元素节点

var el = document.getElementById(‘a‘);

el.className=‘mycolor‘;

</script>

</body>

</html>

按CSS查询一个 document.querySelector

按CSS查询

示例1 查询一个

<!DOCTYPE html>

<html>

<head>

<title>访问元素</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.mycolor{

color:#fff;

}

.steam{

text-decoration: initial;

}

</style>

</head>

<body>

<ul id="ul">

<li id="a">油条</li>

<li id="b" class="steam">包子</li>

<li id="c" class="steam">米饺</li>

<li id="d"><a>鱼粉</a></li>

</ul>

<script>

// 返回一个元素节点

var el = document.querySelector(‘li.steam‘);

el.className=‘mycolor‘;

</script>

</body>

</html>

示例2 查询多个

<!DOCTYPE html>

<html>

<head>

<title>访问元素</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.mycolor{

color:#fff;

}

.steam{

text-decoration: initial;

}

</style>

</head>

<body>

<ul id="ul">

<li id="a">油条</li>

<li id="b" class="steam">包子</li>

<li id="c" class="steam">米饺</li>

<li id="d"><a>鱼粉</a></li>

</ul>

<script>

// 返回多个元素节点

var els = document.querySelectorAll(‘li.steam‘);

els[0].className=‘mycolor‘;

</script>

</body>

</html>

按元素标签查询多个 getElementsByTagName

<!DOCTYPE html>

<html>

<head>

<title>访问元素</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.mycolor{

color:#fff;

}

.steam{

text-decoration: initial;

}

</style>

</head>

<body>

<ul id="ul">

<li id="a">油条</li>

<li id="b" class="steam">包子</li>

<li id="c" class="steam">米饺</li>

<li id="d"><a>鱼粉</a></li>

</ul>

<script>

// 按元素标签查询

var els = document.getElementsByTagName(‘li‘);

els[2].className=‘mycolor‘;

</script>

</body>

</html>

查询父节点parentNode

示例

<!DOCTYPE html>

<html>

<head>

<title>访问元素</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.mycolor{

color:#fff;

}

.steam{

text-decoration: initial;

}

</style>

</head>

<body>

<ul id="ul">

<li id="a">油条</li>

<li id="b" class="steam">包子</li>

<li id="c" class="steam">米饺</li>

<li id="d" ><a id="yufen">鱼粉</a></li>

</ul>

<script>

// 查找父节点

var el = document.getElementById(‘yufen‘);

el.parentNode.className="mycolor";

</script>

</body>

</html>

查找兄弟元素 previousSibling nextSibling

示例

<!DOCTYPE html>

<html>

<head>

<title>访问元素</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.mycolor{

color:#fff;

}

.steam{

color: red;

}

</style>

</head>

<body>

<ul id="ul">

<li id="ali">油条</li><li id="bli">包子</li><li id="cli">米饺</li><li id="dli"><a id="yufen">鱼粉</a></li>

</ul>

<script>

// 查找父节点

var tempel = document.getElementById("bli");

tempel.className="steam";

var previousNode = tempel.previousSibling;

previousNode.className="mycolor";

var nextNode = tempel.nextSibling;

nextNode.className="mycolor";

</script>

</body>

</html>

兄弟元素查找比较坑，只是能元素在同一行时才能查询。

查询子节点 firstChild lastChild

示例

<!DOCTYPE html>

<html>

<head>

<title>访问元素</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.mycolor{

color:#fff;

}

.steam{

color: red;

}

</style>

</head>

<body>

<ul id="ul"

><li id="ali">油条</li

><li id="bli">包子</li

><li id="cli"><a id="yufen">米饺</a></li

><li id="dli">鱼粉</li

></ul>

<script>

// 查找子节点

var tempel = document.getElementById("ul");

var firstNode = tempel.firstChild;

firstNode.className = "mycolor";

var lastNode = tempel.lastChild;

lastNode.className = "mycolor";

</script>

</body>

</html>

原文地址：https://www.cnblogs.com/max-hou/p/11165230.html

时间： 2024-10-07 18:06:57

JavaScript 查找元素的相关文章

javascript中通过className灵活查找元素例如我们要把根据class来进行修改样式

原文:javascript中通过className灵活查找元素例如我们要把根据class来进行修改样式一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一个if判断,如果class属性为box,则修改之 var oUl = document.getElementById("ul1");

JavaScript之查找元素

在IE6还大行其道的时候,原生JS操作DOM有各种各样的问题,jQuery应运而生,它解决了人们的痛点,对各种浏览器及其各种版本的兼容是相当的赞,而且易上手(不包括jQuery2.0),但他毕竟是库,性能上面还是弱于原生的.如今许多公司已经放弃兼容IE6和7甚至8,所以原生JS操作DOM可以搬上台面了,尤其是原生在查找元素方面的扩展可以让你不在依赖jQuery,下面详说原生查找元素最基本的三个document.getElementById()接受一个参数:要取得的元素的ID,查找到则返回该元素,

JavaScript获取元素的方式总结

JavaScript有三种获取DOM元素的方式:id名.类名和标签名. 1. getElementById ?通过id属性来获取对应节点对象,只有一个输入参数(id名),返回一个对象. document.getElementById("container"); alert(typeof document.getElementById("container"));//typeof获取返回值类型 2. getElementsByTagName ?通过标签名获取对应节点对

js：面向对象，Document对象：查找元素对象，修改元素，事件

面向对象编程面向对象的编程,那么是更符合人类所接触的世界的逻辑思维. 将一个系统划分为各个子系统,子系统又由各个模块构成,将每个模块,系统划分为一个个对象,给这些对象赋予某些角色(属性/功能/方法). 伪面向对象编程语言 ---> 面向对象编程语言 1.创建对象的方式 (1) 字面量的方式 //字面量的形式 var student = { name:"蔡徐坤", type:"练习生", like:"唱跳rap篮球", rap:functi

JavaScript实现元素属性的缓冲变化

--------------------------------------------------- 今天给大家分享一个用JavaScript实现元素的属性缓冲变化效果,代码如下: --------------------------------------------------- 1 //获取样式 2 function getStyle( obj, attr ){ //封装的获取元素样式的函数; 3 4 if(obj.currentStyle){ 5 6 return obj.curre

JavaScript获取元素样式

原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:100px;">test</div> <script type="text/javascript"> window.onload=function(){ var oTest=document.getElementById("test"

使用再哈希算法查找元素

使用再哈希算法查找元素: /* hash search, using rehash method if find k, return if not find, d=(d+step)%m, rehash find */ int SearchHash(HashTable H, KeyType k) { int d, d1, m; m = H.tableSize; d = d1 = k%m; while(H.data[d].key != -1) { if(H.data[d].key == k) //h

javascript 获取元素样式的方法

javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值: 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,

查找元素在list中的位置以及折半查询

问题查找某个值在list中的位置解决思路可以用折半查询的方法解决此问题. 解决(Python) #! /usr/bin/env python #coding:utf-8 #折半查找某个元素在list中的位置 def half_search(lst,value,left,right): length = len(lst) while left<right: middle = (right-left)/2 if lst[middle]>value: right = middle-1 elif