DOM

什么是DOM：

Document Object Model（文档对象模型）

将每一个标签/属性/文本/注释/元素，都看作是一个DOM元素/节点/对象（提供了一些操作元素的属性/方法）

面试题HTML/XHTML/DHTML/XML 分别是什么？

	1、HTML - 网页
	2、XHTML - 更严格的HTML，HTML5->XHTML->HTML4.01
	3、DHTML - 动态的网页：D：Dynamic - 其实并不是新技术、新概念，是将现有技术的整合统称，让我们在离线时，网页也具有动态效果
			DHTML：html+css+js（dom）
	4、XML - 未知的标记语言，一切的标记由自己定义，数据格式

DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3部分：
	1、*核心DOM：【无敌】，既可以操作HTML  又 可以操作XML
		          缺陷：API比较繁琐

	2、*HTML DOM：只能操作HTML，API简单，缺陷：比如属性部分，只能访问标准属性，不能访问自定义属性	

	3、XML DOM：只能操作XML，XML已经淘汰了 - 现在最流行的数据格式是JSON

	开发建议：优先HTML DOM，HTML DOM实现不了我们在用核心DOM进行补充

DOM树：

树根：document - 不需要我们创建，一个页面只有一个document对象，由浏览器的js解释器自动创建

作用：可以通过树根找到页面上的每一个DOM元素/节点/对象，也可以操作它

DOM元素的三大属性：

elem.nodeType：描述节点的类型

            document节点：9
	element节点：1
	attribute节点：2
	text节点：3

以前有用：判断xx是不是一个页面元素 - 因为我教你们方法children，是不会得到文本节点的，但是以前的childNodes会得到文本节点

attrNode.nodeValue：描述节点的值

	以前有用：先拿到属性节点，再用此属性去获取属性值

*elem.nodeName：描述节点的名字 - 等我们学了e.target后它还会有用

	拿到当前元素的标签名，判断xx是什么标签
	注意：返回是一个全大写组成的标签名	
     .	只构造一个点击事件（冒泡）
			elem.onclick=e=>{
			if(e.target.属性名=="属性值"{
					}
			}

通过关系获取元素：

    父：xx.parentNode
子：xx.children - 集合：只能找到儿子
第一个儿子：xx.firstElementChild
最后一个儿子：xx.lastElementChild
前一个兄弟：xx.previousElementSling
后一个兄弟：xx.nextElementSibling

****递归：简单来说就是函数中，又一次调用了函数自己，迟早有一天会停下来

何时使用：遍历DOM树，专门用于【遍历层级不明确】的情况，既可以遍历层级不明确的DOM树，也可以遍历层级不明确的数据！

	function 函数名(root){
		1、第一层要做什么直接做！

		2、判断他有没有下一级，如果有下一级，再次调用此函数，但是传入的实参是他的下一级
	}
	函数名(实际的根)

算法：深度优先！优先遍历当前系欸但的子节点，子节点遍历完才会跳到兄弟节点
递归的缺点：同时开启大量的函数调用，大量消耗内存，只有一个情况才用：【遍历层级不明确】

递归 vs 循环：
递归：优点：直观、易用
          缺点：性能较低，尽量只在层级不明确的时候使用
循环：优点：几乎不占用内存
          缺点：难得批爆

专门提供了一个遍历层级不明确的DOM树的API：TreeWalker - 这是一个在DOM树上行走的人

//先创建出tw：
	var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/SHOW_ELEMENT);

//tw对象过后，你会得到一个方法，反复调用nextNode方法找到下一个节点，迟早有一天会等于null，说明没找到，公式
	while((node=tw.nextNode())!=null){
		node要干什么
	}
	缺陷：
	   1、自动的跳过根元素，根元素是不会做任何操作的
	   2、仅仅只能遍历层级不明确的DOM树，不能遍历层级不明确的数据

API直接找元素：

根据HTML的特点去找元素

	ID：var elem=document.getElementById("id值");
	*标签名和*class和name：var elems=document.getElementsByTagName/ClassName/Name("标签名/class名");

根据CSS选择器去找元素：

单个元素：

		var elem=document.querySelector("任意的css选择器");
		//强调：万一选择器匹配到多个，只会返回第一个
		          //没找到返回null

多个元素：

		var elem=document.querySelectorAll("任意的css选择器");
		//强调：找到了返回集合，没找到返回空集合
		//更适合做复杂查找

面试题/笔试题：getXXX 和 querySelectorAll 有什么区别？

	返回结果不同的：
		1、getXXX：返回的是要给动态集合HTMLCollection
			优点：数据始终和DOM树实时挂钩
			缺点：每次DOM树进行修改，都会悄悄的再次查找元素，效率相对较低

		2、querySelectorAll：返回的是要给静态集合NodeList
			优点：每次不会悄悄重新查找，效率较高，而且还支持使用*forEach*！

元素的内容：

1、*elem.innerHTML：获取或设置开始标签到结束标签之间的HTML代码，没有兼容性问题的，可以识别标签
	获取：elem.innerHTML
	设置：elem.innerHTML="新内容"

2、elem.textContent：获取或设置开始标签到结束标签之间的纯文本，有兼容性问题的（老IE不支持），不能识别标签
	获取：elem.textContent
	设置：elem.textContent="新内容"
	老IE：elem.innerText; - 我们第一次见到小三上位，innerText某次浏览器更新后，现在主流浏览器也支持此属性
	为什么老IE不将就主流？- 微软的，生活中，PC端只有 windows系统 和 MAC系统（土豪），windows系统的使用的人多

3、*input.value：获取或设置表单控件的值 - 只要你做正则验证
	获取：input.value
	设置：input.value="新值"

元素的属性：

    1、*获取属性值
	核心DOM：elem.getAttribute("属性名");

	HTML DOM：elem.属性名;

2、*设置属性值：
	核心DOM：elem.setAttribute("属性名","属性值");

	HTML DOM：elem.属性名="属性值";

3、删除属性值：
	*核心DOM：elem.removeAttribute("属性名");

	HTML DOM：elem.属性名="" - 删除不推荐使用HTML DOM，删除不干净属性节点，而有的属性，光有属性名就已经具有功能了

4、判断有没有属性 - 垃圾
	核心DOM：elem.hasAttribute("属性名") - 仅仅只能判断有没有这个属性，不能判断出属性值是什么，往往我们自己用获取属性值的操作，获取到了过后再去进行比较运算

	HTML DOM：elem.属性名!="";

HTML DOM缺陷：
	1、class需要写为className
	2、不能操作自定义属性

开发中：优先使用HTML DOM，HTML DOM满足不了再用核心DOM补充

元素的样式：

1、*内联样式：优先级最高，一定会覆盖其他的样式
		仅仅当前元素可用，不会牵一发动全身
	获取样式：elem.style.css属性名;
	设置样式：elem.style.css属性名="css属性值";

	唯一的缺陷：获取样式时，只能获取到内联样式

2、样式表中的样式 - 学了你也懒得用：
		//找到你想要操作的样式表
		var sheet=document.styleSheets[i];
		//获取样式表中所有的样式规则
		var rules=sheet.cssRules;
		//找到自己想要操作的样式规则
		var rule=rules[i];
		//要么获取要么设置
		console.log(rule.style.css属性名);
		rule.style.css属性名="css属性值";

一切的获取都是为了判断
一切的设置都是修改或添加


扩展：
	html5 和 ES5以上的一切东西老IE都不支持，但是也不要怕，其实以后做兼容的情况很少
		趋势：手机端
		PC就算要做也只做到IE8		win11 - 新出来的系统不稳定

扩展

三种弹出框

警告框：alert();
用户输入框：var user=prompt("提示文字","默认值");
用户输入框：var bool=confirm("提示文字");

百度地图用法

科普：定位技术？

	1、GPS - 美国（安全性、商机、专利费）
	2、北斗 - 中国（军用：打仗：惯性定位：不准确）
		       （民用：卫星定位：精准）
		       （车联网、物联网）
	3、IP定位 - 公用IP，需要去联通、电信、铁通。。。办理
	4、基站定位 - 不准确，半斤范围2公里

网站：IP定位 - 我们不需要自己写任何定位相关的技术，在中国提供了流行两个定位地图（百度、高德）

固定步骤：

1、打开百度，搜索百度地图开放平台
2、右上角，注册/登录(百度账号)
3、拉到最下面，点击立即注册：认证成为开发者
4、应用管理-》我的应用-》创建应用
5、应用名称：随便	应用类型：浏览器端	  不要取消任何东西    白名单：*
6、恭喜你：你已经拿到密钥、基本上要结束了
7、鼠标放到导航条上的开发文档-》javascript API-》示例demo-》挑选你喜欢的地图-》记得用上密钥
8、修改css、js
注意：2021年初，百度地图进行了更新，带来了普通版和WEBGL版，两个版本是不可以混搭的

第四周DOM

DOM