web前端面试总结（1）_document.findelementby-CSDN博客

本文链接：https://blog.csdn.net/Milan_KunderLa/article/details/80926416

1.说说你对盒子模型的理解

所有HTMl元素都可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用

css模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

盒模型允许我们在其他元素的周围元素边框之间的空间放置元素

当你指定一个css元素的宽度与高度时，你只是指定内容区域的宽高，元素真正的宽高为：内容+填充+边框+边距

兼容问题：在IE5.x和6中使用自己的非标准模式，导致设置的width即为内容加边框加填充的总和。为解决这个问题，最好在元素的父元素及子元素上面设置内边距和外边距

2.什么是DOM？它的结构是什么？如何使用js添加，删除，复制，移动，查找节点？

DOM：文档对象模型，定义了表示和修改文档所需的对象，这些对象的行为和属性以及这些对象之间的关系。通过js,您可以重构整个HTML文档，您可以添加移除改变和重排页面上的项目

要改变页面上的某个东西，js就需要获得对HTML文档中所有元素进行访问的入口，这个入口，连同对HTML元素进行添加，移动和改变或移除的方法和属性，都是通过文档对象模型来获得的。

它的结构：可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现

DOM可以将任何HTML或XML文档描述成一个由多层节点构成的结构

js添加节点：appendChild(),用于向childNodes列表的末尾添加一个节点

    var returnNode = someNode.appendChild(newNode);//返回结果为newNode

js移动节点：如果appendChild()传入的节点已经存在，即已经是文档的一部分了，那么将从原来的位置转移到新的位置

因此，如果在调用appendChild()时传入父节点的第一个子节点，那么这个子节点将变成父节点的最后一个子节点

js插入节点到任意位置：insertBefore(),这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，插入的节点会作为被参照的节点的同胞节点（previousSibling）

同时被方法返回。如果参照节点是null，那么insertBefore（）与appendChild()执行相同的操作

js替换节点：replaceChild(),接受的两个参数是：要插入的节点以及要替换的节点。要替换的节点仍然存在只是从文档树中被移除，找不到它的位置。

该节点的所有关系指针都会从被它替换的节点复制过来。

js移除节点：removeChild()，这个方法接受一个参数，即要移除的节点，被移除的节点将成为方法的返回值。

js克隆节点：cloneNode(),这个方法所有节点共有，接受一个布尔值，表示是否执行深复制（为true表示复制节点及其子节点，否则只复制节点本身）。

复制后的节点副本归文档所有，但并没有为其指定父节点

在IE中存在一个bug，它会复制事件处理程序。

js查找节点：document提供了两个方法用于查找元素： document.findElementByID()和 document.findElementByTagName();

document.findElementByID("id"):id必须完全匹配，区分大小写。IE7及以前的版本虽然不区分大小写，但是如果存在表单的name属性与要找的id相同，并且位置在该id元素之前，

那么结果会返回那个表单元素，解决的办法是尽量不要使表单的name属性值与某个id相同。

假如页面中存在多个相同id，查找该id元素时，只会返回第一个id符合的元素;

document.findElementByTagName()：结果会返回一个HTMLCollection对象，可以使用方括号语法或者item()方法访问HTMLCollection中的项

例如：

            var images = document.getElementByTagName("img");
		alert(images[0]);
		alert(images.length);
		alert(images.item(0).src);

也可以使用namedItem()方法获取对象的项，前提是需要为每一项添加name属性，再通过name查找该项。

查找页面中所有元素使用：document.findElementByTagName("*");

注意：在IE中这样调用会返回注释节点

3.什么是XMLHttpRequest?说出一次完整的http请求过程？写出关键代码。

XMLHttpRequest:ajax能够向服务器请求额外的数据而无须卸载页面，而这一技术的核心是XMLHttpRequest对象（简称XHR）。

XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，这种技术虽然包含XML但是与数据格式无关，就是无须刷新页面即可从服务器获得数据，但是不一定是XML数据

var xhr = new XMLHttpRequest();

xhr.open("get","example.txt",false);

//1.三个参数：要发送的请求类型，请求的URL，表示是否异步发送请求

//2.open并不会真正的发送请求，而只是启动一个请求以备发送

//3.url相对于执行代码的当前页面，当然也可以使用绝对路径，但是必须与当前页面使用的域名，协议，端口相同，否则都会引起安全错误

xhr.send(null);

//send()接收一个参数，即作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null

//在收到服务器响应请求之后，响应的数据会自动填充XHR对象的属性

//responseText:作为响应主体被返回的文本

//responseXML:如果响应的内容类型时"text/xml"或"application/xml",这个属性将包含着响应数据的XML DOM文档

//status:响应的http状态，200作为成功的标志；304代表请求的资源并没有被改变，可以直接使用浏览器中缓存的版本

//statusText:Http状态的说明

一次完整的http请求： 1.建立tcp连接（三次握手）

2.web浏览器向web服务器发送请求命令

3.web浏览器发送请求头信息，如user-agent，host等自身的信息

最后发送一个空请求头表示请求头信息发送完毕

如果是post提交，会继续提交请求体

4.web服务器应答，应答第一部分是版本号和状态协议码

5.web服务器发送应答头信息，关于它自己的信息及被请求的文档，最后发送一个空白表示头信息发送结束

6.Web服务器向浏览器发送数据，以Content-Type应答头信息所描述的格式发送用户所请求的实际数据

7.web服

务器关闭tcp连接，一旦Web服务器向浏览器发送了请求数据，它就要关闭tcp连接。

如果添加Connection:keep-alive Tcp连接在发送后将仍然保持打开状态

发送同步请求：

    var xhr = new XMLHttpRequest();
	xhr.open("GET","example.txt",false);
	xhr.send(null);
	if(xhr.status>==200&&xhr.status<300||xhr.status==304){
	console.log(xhr.responseText);
	console.log(xhr.responseXML);
	console.log(xhr.status);
	}else{
		console.log("Request was unsuccessful:"+xhr.status);
	}

发送异步请求：

通过检测readyState属性，该属性表示请求/响应过程的当前活动阶段：

0：未初始化。已经调用open（）方法。

1：启动。已经调用open（）方法，但尚未调用send（）方法。

2：发送。已经调用send()方法，但是尚未接收到响应

3：接收。已经接收到部分响应数据。

4：完成。已经接收到全部响应数据，而且可以在客户端使用了。

只要readeyState属性的值从一个值变化到另一个值，就会触发readystatechange事件。

在调用open之前指定onreadeystatechange事件处理程序才能确保跨浏览器的兼容性。

//异步
	var xhr2 = new XMLHttpRequest();
	xhr2.onreadystatechange = function(){
		if(xhr2.readyState == 4 ){
			if((xhr2.status>=200 && xhr2.status<300)||xhr2.status==304){
				console.log(xhr2.responseText);
			}else{
				console.log("Request was unsuccessful:"+xhr2.status);
			}
		}
	};
	xhr2.open("GET","example.txt",true);
	xhr2.send(null);

取消异步请求：xhr.abort();

调用这个方法过后，xhr对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。

GET请求：
常用于向服务器查询某些信息，必要时可以将要查询的字符串参数追加到URL的末尾，以便将信息发送给服务器。
对XHR而言，位于传入open（）方法的url末尾的查询字符串必须经过正确的编码才行。
使用GET请求经常发生查询字符串的格式问题。查询字符串中的每个参数的名称和值都必须使用encodeURIComponnt()进行编码，然后才能放到URL末尾，每个参数之间都必须由&分隔

例如：
var xhr = new XMLHttpRequest()；
function addURLParam(url,name,value){
url += (url.indexOf("?")==-1 ? "?":"&");
url += encodeURIComponent(name) +"="+ encodeURIComponent(value);
return url;
}
var url = addURLParam("example.php","keyword","&酒店");
xhr.open("get",url);
首先检查url是否存在问号(以确定是否已经有参数存在)，如果没有则添加问号，如果有则添加&
传入的参数中含有“&”，因此必须进行url编码。

POST请求：
通常用于向服务器发送应该被保存的数据。
xhr.open("post","example.php",true);
"true"代表是否发送异步请求

4.js数据类型有哪些？如何准确的检测类型？

有五种简单数据类型（也称基本数据类型）： Undefined、Null、Boolean、Number和String
还有一种复杂数据类型： Object
检测数据类型：typeof操作符
使用typeof可能会返回下列字符串结果：
"undefined"：这个值未定义
"boolean":这个值是布尔值
"string":这个值是字符串
"number"：这个值是数值
"object"：这个值是对象或null;
"function":这个值是函数
注意：typeof(null)返回Object,因为null被认为是一个空的对象引用。

和instanceof的区分：
在检测基本数据类型时，使用typeof是非常方便的，但是在检测复杂类型例如Object时，我们或许并不关心它是不是一个对象，我们关心的是它是一个什么对象类型
如：

var person = new Object();
var color = new Array();
console.log(person instanceof Object)//person是一个Object嘛？
console.log(color instanceof Array)//person是一个Array嘛？
console.log(color instanceof Array)//person是一个Array嘛？