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

DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。

浏览器会根据DOM模型，将结构化文档（比如Html或者xml等）解析成一系列的节点，再由这些节点解析成树状结构（Dom Tree），所有的节点和最终的树状结构都有规范的对外接口，所以DOM可以理解成网页的编程接口。DOM有标准的国际标准，我们目前使用的是DOM3。

严格的说，DOM不属于Javascript，但是DOM操作是Javascript最常见的任务，而Javascript也是最常见的DOM操作语言。

DOM操作

创建元素
var newDiv = document.createElement("div");
设置类名
newDiv.className = "item";
设置ID
newDiv.id = "first";
设置背景颜色
newDiv.style.background = "red";
添加元素box进body中
先获取要添加的父级元素
var body = document.getElementsByTagName("body")[0];
var box = document.getElementsByClassName("box")[0];
body.appendChild(newDiv); //body中现有两个内容,一个是newDiv 一个是box 
//现在的情况是把newDiv中的内容插到box的后面

要想把div中的内容插入到box的前面,则如下:
body.insertBefore(newDiv,box);

replaceChild()方法用新节点替换某个子节点
body.replaceChild(newDiv, box);

删除元素
body.removeChild(box); // 删除box标签
box.remove();

原生对象 内置对象 宿主对象

宿主对象
var obj = {
    name:"张飞",
    age:18,
    gender:"man",
    eat:function(){
        console.log("吃饭");   
    }
};

obj.dd = 1;
console.log(obj);
console.log(obj.age);
obj.eat();
obj.eat();

原生对象:浏览器已经定义好,提供的对象,里面有很多属性,有些属性我们可以设置值,有些属性的
值我们只能得到,不能直接通过属性更改值
宿主对象:就是BOM,DOM和自己定义的对象
内置对象:是本地对象中比较特殊的一种,它不用实例化,包括Gloable和Math

DOM属性

节点: 标签 文本  注释 声明(doctype)
可以通过如下方法获取元素下的所有节点:
console.log(box.childNodes);
获取标签类型的子节点 得到的节点是一个标签
console.log(box.children[0]);

尺寸 位置
console.log(newDiv.offsetWidth); // 打印宽度 包含边框
console.log(newDiv.clientWidth); // 不含边框也不含滚动条(可视区域)
console.log(newDiv.scrollHeight)//也是元素垂直/水平滚动了的距离，或者是元素卷帘卷走的视觉中看不到的部分

overflow处理超出部分 visible默认可见
overflow:scroll; //出现滚动条

位置
相对于定位父级的一个位置
console.log(newDiv.offsetTop);
console.log(newDiv.offsetLeft);

子元素滚动上去的一段距离,除了scrollTop外,以上元素都是只读
console.log(newDiv.scrollTop);

定时器

一次性定时器,只能使用一次
写法1:
var time = setTimeout(function(){
    console.log("一次性定时器");
},1000);
写法2:
function f1(){
    console.log("一次性定时器");
}
setTimeout(f1,1000);

清除一次性定时器
clearTimeout(time);

循环计时器,每隔一段时间,就会执行一次函数
写法1:
var timer = setInterval(function(){
    console.log("循环计时器");
},1000);
写法2:
function f2(){
    console.log("循环计时器");
}
var timer = setInterval(f2,1000); 

清除循环计时器
clearInterval(timer);

实现:没2秒打印一次我爱中国,打印4次后,停止打印
var timer = setInterval(function(){
    console.log("我爱中国");
},2000);
setTimeout(function(){
    clearInterval(timer);
},8000);

实现金币掉落

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .item{  
                width:60px;
                border-radius:50%;
                position:absolute;
                top:0px;
                left:10px;
            }
        </style>
    </head>
    <body>
        <input type="button" value="开始" id="start"/>
        <input type="button" value="停止" id="end"/>
    </body>
    <script>
        var start = document.getElementById("start");
        var end = document.getElementById("end");
        var time2;
        end.onclick = function(){
            clearInterval(time2);
        }
        start.onclick = function(){
        time2 = setInterval(function(){
                var jb = document.createElement("img"); 
                jb.src="jb.jpg";
                jb.className="item";
                document.getElementsByTagName("body")[0].appendChild(jb);
                jb.style.left=Math.random()*500 + 100 + "px";
                var time1 = setInterval(function(){
                    jb.style.top = jb.offsetTop + 5 + "px";
                    if(jb.offsetTop >= 500){
                        jb.remove();
                        clearInterval(time1);
                    }
                },30);
            },200);
        }   
    </script>
</html>

结果如图