JS DOM中getElement系列和querySelector系列获取节点
节点查找方法
document.getElementById() 前面必须是document
document.getElementsByName() 前面必须是document
ele.getElementsByTagName() 前面元素不限
ele.getElementsByClassName() 前面元素不限
querySelector()
querySelectorAll()
.tagName 元素名称
在低版本IE中，document.getElementById() 存在bug
用来获取id或者name为指定值的元素
如果某个元素的name属性值和另一个元素的id属性值相同
会根据顺序选取排在前面的元素
识别IE浏览器：在IE浏览器中，\V会解析成V；其他浏览器中，\V为垂直制表符（相当于空格）
!+"\v1" 在IE中：!+"\v1"=!+"v1"=!NaN=true；其他浏览器中：!+"\v1"=!+" 1"=!1=false
document.all是页面内所有元素的集合
document.all(0) 获取第一个元素
document.all[0] 获取第一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ var div=document.getElementById("div1");
console.log(div.tagName); //var myul=div.getElementById("myul");
//console.log(myul);//index.html:19 Uncaught TypeError: div.getElementById is not a function at HTMLDocument.<anonymous> (index.html:19) 说明不能使用其他元素来获取某个id的元素 var target=document.getElementById("target");
console.log(target.innerHTML);//IE7以下：这是错误的元素 其他浏览器：这是正确的元素 // 兼容低版本IE的写法
function getElementById(id){
var el=document.getElementById(id);
//如果是IE浏览器
if(!+"\v1"){
// 如果获取到的元素的id就是指定id，则直接返回
if(el && el.id===id){
return el;
}else{
var els=document.all(id);
var len=els.length;
for(var i=0;i<len;i++){
if(els[i].id===id){
return els[i];
}
}
}
}
//如果是其他浏览器
return el;
} console.log(getElementById("target").tagName);//p
}); </script>
</head>
<body>
<a href="#" name="target">这是错误的元素</a>
<p id="target">这是正确的元素</p> <div id="div1">
<ul id="myul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
document.getElementsByName() 在低版本浏览器上存在Bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ var cbox=document.getElementsByName("num");
console.log(cbox.length);//3
console.log(cbox);//NodeList(3) [input, input, input] }); </script>
</head>
<body>
<input type="checkbox" name="num">1
<input type="checkbox" name="num">2
<input type="checkbox" name="num">3
</body>
</html>
document.getElementsByTagName("!") 可以获取到所有的注释
.nodeValue() 显示注释文本
获取注释在谷歌浏览器中无法获取到，只在IE8以下存在
document.getElementsByTagName("*") 获取到所有的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ var input=document.getElementsByTagName("input");
console.log(input[0].value);//hh~ var comments=document.getElementsByTagName("!");
var len=comments.length;
for(var i=0;i<len;i++){
console.log(comments[i].nodeValue);
} var all=document.getElementsByTagName("*");
var len=all.length;
for(var i=0;i<len;i++){
console.log(all[i].tagName);
}
}); </script>
</head>
<body>
<!-- 这是一段注释哈 -->
<input type="text" value="hh~">
</body>
</html>
getElementsByClassName()
兼容性IE9+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ var lights=document.getElementsByClassName("light");
console.log(lights);//HTMLCollection(3) [div.light, div.light.dark, div.light] var light_dark=document.getElementsByClassName("light dark");
console.log(light_dark);//HTMLCollection [div.light.dark]
}); </script>
</head>
<body>
<div class="light"></div>
<div class="light dark"></div>
<div class="light"></div>
</body>
</html>
由于document.getElementsByClassName() 不兼容IE8以下的浏览器，因此使用document.getElementsByTagName()
以下是兼容性写法
正则中\s表示空白
pattern.test(str) 正则检测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ // 自定义兼容IE8以下的方法
var getElementsByClassName=function(opts){
// 把参数都存储到一个对象中，使用对象的属性分别获取到这些参数
var searchClass=opts.searchClass;
var tag=opts.tag || "*";//没有指定标签名，则查找所有标签
var node=opts.node || document;//没有指定查找范围，则查找整个文档
var res=[]; //如果是现代浏览器
if(document.getElementsByClassName){
var nodes=node.getElementsByClassName(searchClass);
// 判断是否是指定标签名
if(tag !== "*"){
for(var i=0,len=nodes.length;i<len;i++){
if(nodes[i].tagName==tag.toUpperCase()){
res.push(nodes[i]);
}
}
}else{
res=nodes;
}
return res;
}else{
//如果是IE8以下的浏览器
var els=node.getElementsByTagName(tag);
var len=els.length;
// 正则： 开始|空格 + class + 结束|空格
var pattern=new RegExp("(^|\\s)"+searchClass+"($|\\s)");
for(var i=0,j=0;i<len;i++){
if(pattern.test(els[i].className)){
res[j]=els[i];//将匹配到的数据存储到res中
j++;
}
}
return res;
} } // 调用方法
var node=document.getElementById("box2");
var res=getElementsByClassName({
searchClass:"light dark",
node:node
});
console.log(res[0].innerHTML);//1 }); </script>
</head>
<body>
<div id="box1">
<div class="light">light</div>
<div class="light dark">light dark</div>
<div class="light">light</div>
</div>
<div id="box2">
<div class="light">light2</div>
<div class="light dark">light dark2</div>
<div class="light">light2</div>
</div> </body>
</html>
querySelector() querySelectorAll() 兼容性：IE8+
querySelector() 找到一个就返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ var box1=document.querySelector("#box1");
console.log(box1.tagName);//UL var li=box1.querySelector("li:last-child");
console.log(li.innerHTML);//light // 类名不规范
//var boxh=document.querySelector(".hh:bb");//index.html:22 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '.hh:bb' is not a valid selector.
//console.log(boxh);
// 需要进行转义
var boxh=document.querySelector(".hh\\:bb");
console.log(boxh);//<ul id="box1" class="hh:bb">... var all=document.querySelectorAll("ul,input");
console.log(all);//NodeList(3) [ul#box1.hh:bb, ul#box2, input] }); </script>
</head>
<body>
<ul id="box1" class="hh:bb">
<li class="light">light</li>
<li class="light dark">light dark</li>
<li class="light">light</li>
</ul>
<ul id="box2">
<li class="light">light2</li>
<li class="light dark">light dark2</li>
<li class="light">light2</li>
</ul>
<input type="text" value="1"> </body>
</html>
之前提到类数组对象具有动态性，但querySelectorAll() 返回的是staticNodeList，不具有动态性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ // 不再陷入死循环
// 因为querySelectorAll返回的是staticNodeList
// 不具有动态性
var div1=document.querySelectorAll("div");
var i=0;
while(i<div1.length){
document.body.appendChild(document.createElement("div"));
i++;
} }); </script>
</head>
<body>
<div>1</div>
<div>1</div> </body>
</html>
JS DOM中getElement系列和querySelector系列获取节点的更多相关文章
- getElementBy系列和querySelector系列的区别
querySelector和querySelectorAll的用法和getElementBy大致一样,获取的时候带上符号,getElementBy获取的是元素的动态集合,querySelector获取 ...
- 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，
封装常用的js(Base.js)——[01]理解库,获取节点,连缀, youjobit07 2014-10-10 15:32:59 前言: 现如今有太多优秀的开源javascript库, ...
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- JS DOM中Ajax的使用
一.概念 全称:Asynchronors Javascript XML 异步JS数据交换格式. [Asynchronous]:异步的,即在执⾏ AJAX 请求时不会阻塞后⾯代码的运⾏.[JavaSc ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...
- js函数中的BOM和DOM
BOM 浏览器对象模型 screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.l ...
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...
随机推荐
- os模块常用方法笔记
os模块是程序和系统文件之间的交互接口,可以实现对文件的创建.删除等功能,以下对os模块的功能做一个笔记,方便以后学习和查找. import os os.getcwd() #获取当前工作目录,即当前p ...
- http1.0、http1.x、http 2和https梳理
http1.0.http1.x.http 2和https梳理 Http1.x 线程阻塞,在同一时间,同一域名的请求有一定数量限制,超过限制数目的请求会被阻塞 http1.0 缺陷:浏览器与服务器只保持 ...
- 痞子衡嵌入式：知名半导体MCU大厂软件开发C代码规范
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是飞思卡尔软件开发C语言编码规范. 2020鼠年春节是个漫长的假期,痞子衡在家百无聊赖,翻出了2016年10月1日(这个时间是痞子衡正式开始 ...
- 谈下程序设计算法的准备心得与体会-nCov隔离也许帮你提升能力
最近武汉的n-Cov使得大家只能在家办公了. 在家里的感受是什么样的呢? 1.上班的时候一直在奔跑,现在总算可以有集中的时间来思考一些之前一直没能好好整理的内容 2.时间变得自己可以掌控,优先级有自己 ...
- ORB-SLAM2 初体验 —— 配置安装
转载请注明出处,谢谢 原创作者:MingruiYU 原创链接:https://www.cnblogs.com/MingruiYu/p/12286752.html ORB-SLAM2作为目前应用最广泛的 ...
- CCF_ 201409-2_画图
将一个数组比作画板,有颜色的位置标1,统计即可. #include<cstdio> #include<iostream> #define NUM 100 using names ...
- Go语言实现：【剑指offer】变态跳台阶
该题目来源于牛客网<剑指offer>专题. 一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 找规律: 1阶:1种: 2阶:2 ...
- 《Head First Java（第二版）》中文版 分享下载
书籍信息 书名:<Head First Java(第二版)>中文版 作者: Kathy Sierra,Bert Bates 著 / 杨尊一 编译 张然等 改编 豆瓣评分:8.7分 内容简介 ...
- Centos7更改屏幕显示率
第一种,在虚拟机中安装VMwareTools,之后在虚拟机菜单栏"查看"这一项选择立即适应窗口. 第二种,修改/boot/grub2/grub.cfg配置文件,在终端输入su,输入 ...
- EIP
EIP中的值就是CPU下次要执行的地址 jmp 直接修改eip的值 1.jmp imm=mov eip,imm 2.jmp r 3.jmp m call 直接修改eip的值,并把当前指令的下一行地址存 ...