JS基础之原生对象 宿主对象 DOM属性 DOM方法 定时器

JS基础

DOM

DOM即Document Object Model是W3C(万维网联盟)的标准
DOM定义访问HTML和XML文档的标准:"W3C文档对象模型(DOM)是中立于平台和语言的接口,
他允许程序和脚本动态的访问和更新文档的内容,结构和样式"

W3C DOM标准被分为3个不同的部分:
1.核心DOM-针对任何结构化文档的标准模型
2.XML DOM-针对XML文档的标准模型
3.HTML DOM-针对HTML文档的标准模型

其中在HTML DOM中,所有事物都是节点,DOM是被视为节点树的HTML.
1.整个文档是一个文档节点
2.每个HTML元素是元素节点
3.HTML元素内的文本是文本节点
4.每个HTML属性是属性节点
5.注释是注释节点

HTML DOM将HTML文档视作树结构,这种结构被称之为节点树,通过HTML DOM,树中的所有节点均可通过
JavaScript进行访问.所有HTML节点(元素)均可被修改,也可以创建或删除节点

一些常用的HTML DOM方法:
1.getElementById(id)-获取带有指定id的节点(元素)
2.appendChild(node)-插入新的子节点(元素)
3.removeChild(node)-删除子节点(元素)

一些常用的HTML DOM属性:
1.innerHTML-节点(元素)的文本值
2.parentNode-节点(元素)的父节点
3.childNodes-节点(元素)的子节点
4.attributes-节点(元素)的属性节点

DOM是HTML文档结构,其实就是为了能让js操作html元素而指定的一个规范,dom的根本
就是document对象,改对象有很多属性和方法,例如创建节点,复制节点,移除节点,修改属性等
DOM对象的出现是为了方便javascript操作HTML标签而已,DOM全名为Document Object Model(
文档对象模型),也是基于HTML文档出来的,提供给Javascript用来动态(比如点击事件)修改文档状态,
所以操作DOM实际上就是在操作HTML文档对象(每一个标签)

CSS只能修饰HTML文档样式而已,而javascript能把HTML和CSS相结合,也就是以前所说的DHTML(动态HTML)

DOM就是将XML（或者HTML）内的节点定义成基本统一的对象数据可以供程序语言（如javaScript）控制的技术规范。
可以使用javascript语言来操作DOM以改变网页,为了改变网页,你必须告诉Javascript操作哪一个节点,这就是操作DOM

操作DOM可以让你更改网页的交互方式。所有网页的交互都依赖这种DOM技术,即使不用Javascript,也可以使用其他语言来操作DOM。
DOM是一颗树,树枝和树叶都做了编号,你告诉一个脚本,一个函数去寻找哪一个枝干的哪一个叶子,对这个叶子做什么改变
    当你在知乎的搜索栏输入数据时，Javascript 捕获到了你的输入，对服务器使用异步查询，动态显示搜索结果。
    当你向下滑动时，Javascript 捕获到了你滑动的距离，根据距离的大小来判断是否改变 DOM，进而让顶部的导航栏跟随浏览器窗口滚动，免得你回头去找。
    当你点击修改按钮时，Javascript 捕获到了这个按钮的鼠标点击事件，反馈了一个可编辑的答案给你。
Javascript不能够真正改变DOM,它仅仅是改变呈现内容,当你刷新的时候就会发现我靠这怎么他妈的什么都还原了
但是你可以把这些改变用请求的方式传递给后端语言接口,由后端语言比如 PHP Python Java Node等来进行后续的操作,它们接到你的请求之后就去修改服务器数据,这样改变就生效了
但是用户的交互比如弹窗、滑过变色等等根本没必要让服务器也跟着掺和，why? 因为交互只是暂时的,用完了,还要变成默认的,不需要保存到服务器,只要保证交互的时候有反馈就行了
前端:
   HTML 表达静态结构（网页有哪些元素，每个元素代表什么意义，元素包含了什么内容）
   CSS 呈现美化（元素的颜色，形状，布局）
   Javascript 负责动态交互（操作 DOM，使用 Ajax 进行异步刷新，与服务器交互）
该链接介绍的还算不错 :
链接：https://www.zhihu.com/question/34219998/answer/58211568