JS 基础知识面试题笔记2

主要是DOM,Ajax，BOM，存储和事件绑定

@[TOC] DOM操作
DOM，文档对象模型
题目：
DOM属于哪种数据结构？
答：树状结构
DOM操作的常用API
答：节点操作(插入节点，删除节点，移动节点，获取节点这些)和结构操作
attr和Property的区别
property修改对象属性，不会体现到html结构中
attribute修改html属性，会改变html结构
两者都可能引起DOM重新渲染，使用中尽量用property;
一次性插入多个DOM节点，考虑性能？
创建一个空的文档片段，然后把这多个都插入到这个空的文档片段中，最后再把这个文档片段插入到DOM节点树上。

知识点分析：
获取DOM节点：

document.getElementById("id");//通过id获取节点；
	document.getElementByClassName("className")；//通过className获取节点集合；
	document.getElementByTagName("div");//通过标签名获取节点集合；
	document.querySelectorAll("p")；//通过选择器获取节点集合

		

querySelectorAll选择器和TagName有什么区别？

	attribute 修改的标签的属性:
p1.setAttribute("data-name","imooc");//可以设置dom元素属性
console.log(p1.getAttribute("data-name"));//会打印出imooc

**property**:
		意思是我们能通过DOM的获取节点进行属性的一个操作，比如获取到P节点后，可以设置p.style.width  设置p的 宽；它本身不是api 名字，只是一种属性操作形式的名字叫法。或者比如我们拿取了p标签节点，可以打印一下这个标签的className 看看
		
console.log(p1.className); //如果p1标签设置了red色，那会打印出red

还有个nodeName，p1.nodeName  不常用的这个，打印出来是p,它是告诉你这个是什么标签的意思。

平常工作中尽量用property处理节点，就是p.style.color=“red”;这种写法。

DOM节点操作：
新增/插入节点

新增节点：
const div1=document.getElementById("div1");//获取div1节点
const div2=document.getElementById("div2");  //获取div节点2
const p1=document.createElement("p");//创建一个p节点 名叫p1
p1.innerHTML=`一段文字`    //设置p1节点的内容
div1.appendChild(p1);   //在div1节点里面的末尾插入p1节点。
//移动节点，；就是 div1里面有一个节点，我们获取到叫，管它叫做p1吧。然后在div2里面appendChild(p1)；就会把它移过去
div2.appendChild(p1);//此时p1就会移动到了div2里面。

获取父元素：
console.log(p1.parentNode);   //打印出来的就是div2；上面移动了，所以p1现在的父元素是div2;

获取子元素列表（获取到的是集合）：

box.lastElementChild  可以获取到它的子节点；
box.children 可以获取到它的所有子节点；
box.parentNode 可以获取到它的父节点；
box.nextElementSibling 可以获取到下一个兄弟节点；
box.previousElementSibling 可以获取到它的上一个兄弟节点。
Box.firstElementChildren 第一个子节点；
 

删除节点：
removeChild() 方法可以从DOM树中删除一个子节点；方法是 父节点.removeChild(要删除的子节点)；

DOM性能如何优化
DOM操作要避免频繁的操作，将频繁的操作改为一次性操作，对DOM查询做保存。