原生js

原生js介绍

原生态JS是指遵循ECMAscript标准的javascript，不同于微软的jscript也不依赖于任何框架，依托于浏览器标准引擎的脚本语言。

原生js获取DOM对象的几种方法

通过id获取 <div id="id1"></div> <script> let box= document.getElementById("id1"); </script> 注意：使用getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。一个HTML脚本文件只能有一个id。 通过class获取 <div class="div1"></div> <div class="div1"></div> <script> var divs= document.getElementsByClassName("div1"); var div1 = divs[0]; var box2 = divs[1]; </script> 注意：使用getElementsByClassName()括号中的不需要在前面加 “.” ，因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。 因为一个html文件可能有多个相同的值的class。 通过标签名获取 <div> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> <p>段落6</p> </div> <script> var pCollection= document.getElementsByTagName("p"); </script> 注意：使用getElementsByTagName()返回的是一个集合。 通过name属性获取 <div> <input type="text" name="user" /> </div> <script> var userInput= document.getElementsByName("user"); </script> 注意：只有含有name属性的元素(表单元素)才能通过name属性获取 。 通过querySelector获取 <div id="box"></div> <script> let box= document.querySelector("#box"); </script> 注意：querySelector()方法括号中的值是元素的选择器，所以前面加了”#”符号，使用的是id选择器。此方法直接返回DOM对象本身。 通过querySelectorAll获取 <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> <div class="box">box4</div> <div class="box">box5</div> <script> // var box1= document.querySelector(".box"); var boxes= document.querySelectorAll(".box"); </script>

注意：querySelector()和querySelectorAll()方法括号中的取值都是选择器，但从图中我们可以看出，两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

总结：

所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。querySelector()与querySelectorAll()两者的联系与区别： 联系： 两者括号中的取值都是选择器 区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

原生js - get /post方式发送AJAX请求

get方式 //1创建一个xhr对象 var xhr = new XMLHttpRequest ( ) ; //2监听状态的改变 xhr.onreadystatechange=function(){ if(xhr.readyState===4){//请求成功 if(xhr.status===200){//响应成功 doResponse(xhr);//调用一个函数 } } } //3打开一个链接 xhr.open('get','xxx.html',true); //1.请求方式 2.发送到哪去 3.是否为异步请求 是true 否 flase //4发送数据 xhr.send(null); post方式 //1创建一个xhr对象 var xhr = new XMLHttpRequest ( ) ; //2监听状态的改变 xhr.onreadystatechange=function(){ if(xhr.readyState===4){//请求成功 if(xhr.status===200){//响应成功 doResponse(xhr);//调用一个函数 } } } //3打开一个链接 xhr.open('post','xxx.php',true); //3.5 修改请求消息头部 //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //4发送数据 传参 xhr.send('uname=xxx&upwd=123');