原生js选择器或者选择元素或者选择方式

包括但不限于，作者水平有限，如有不足，请评论指出

第一种，已有元素，且元素id为01

var aa = document.getElementById("01");

第二种，已有元素，id已有，使用变量选择

var number01 = 3;

var aa = document.getElementById(number01)

第三种，选择所有某一标签的所有元素，比如div

var aa_array = document.querySelectorAll("div")

遍历方式

for(var i =0;i <aa_array.length; i++){

console.log(aa_array[i])

}

第四种，选择带有某一类的所有元素,比如类名为monster

var aa_array = document.querySelectorAll(".monster")

遍历方式

for(var i =0;i <aa_array.length; i++){

console.log(aa_array[i])

}

第五种, 比如标签div

var aa_array = document.getElementsByTagName("div")

第六种通过类名选择,比如类名为aa

var aa_array = document.getElementsByClassName("aa")

此方法和querySelectorAll()方法有区别，如果是想要遍历，就是用querySelectorAll();

第七种通过name属性来选择，比如name为jack

var aa_array = document.getElementsByName("jack")

遍历方式

for(var i =0;i <aa_array.length; i++){

console.log(aa_array[i])

}

第八种，使用querySelector

获取第一个span标签

document.querySelector("span");

获取第一个class=tank的元素

document.querySelector(".tank");

第九种结果内选择，比如选择具有某类名，比如class=tank,且带有某一属性的元素，比如属性值为my_make

var all_tank_array = document.querySelectorAll(".tank")
   var all_tank_my_make=[];
   for(var a = 0;a <all_tank_array.length; a++){
       if(all_tank_array[a].getAttribute("tank") =="my_make"){
           all_tank_my_make.push(all_tank_array[a]);
       }
   }

第十种选择某一个标签内的子元素

<body>

<ul id="ul01">
   <li>你好</li>
   <li>我好好</li>
   <li>大家好</li>
   <li>都好</li>
</ul>
<button οnclick="submit02()">提交评论</button>
<script type="text/javascript">
   function submit02() {

var list = document.querySelectorAll("ul li");
   console.log(list);

//这里，长度是4，没有选到ul之外的li

for(var i =0;i <list.length;i++){
   list[i].parentNode.removeChild( list[i] );
   console.log(i);
}

console.log(list);

}

</script>

第十一种，选择某一id下的某一个标签

var list = document.getElementById("ul01").getElementsByTagName("li");

原生js选择器或者选择元素或者选择方式相关推荐

原生js实现给指定元素的后面追加内容
参考链接:http://www.jb51.net/article/35412.htm 原生js实现给指定元素的后面追加内容 var header1 = document.getElementById( ...
html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素创建select var select = document.cre ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
原生js实现select下拉框选择
最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题.后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧. <html lang="en&qu ...
原生js快速查找指定元素
虽然已经很少有原生js写项目,不过有些组件任然使用js,原生js有一个非常麻烦的问题就是查找元素,写class怕准确度底,id总不不能写一大堆,又不想引用jquery className:id,cla ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
原生js追加html代码,原生js实现给指定元素的后面追加内容
复制代码代码如下: var header1 = document.getElementById("header"); var p = document.createElement ...
原生js打印指定节点元素
很简单(可粘贴至txt文档后改后缀为html打开看效果): <!doctype html> <html lang="en"> <head>< ...

原生js选择器或者选择元素或者选择方式

原生js选择器或者选择元素或者选择方式相关推荐

最新文章

热门文章