DOM对象的基础用法

js（javascript）分为三大部分：
1.js的基础语法（也就是ECMAScript，简称为ES6）。
2.DOM：document object model。
3.BOM：浏览器为对象。
html页面中都有一元素。html标签就是根。
文档：一个页面就是一个文档。
元素：（element）页面中所有的标签都是元素。每个标签都是一个元素。
节点：页面的所有内容都是节点。
root：根/
DOM的书写规范和注意事项。
1.凡是成对的标签 如果需要更改里面的文本信息，大多数都是使用 .innertext属性修改的。
btnObject=document。getElementById（“id名字”）。这是将id、给一个js的变量。
属性的单词：
获取文档中id的方法：
document.getElementById(“id的名字”).
获取标签名字的方法：
document.getElementsByTagName(“标签的名字”)
获取某个id里面的标签的方法：
document.getElementById(“id”).getElementsByTagName(“标签的name”);
function my$(id)returndocument.getElementById(id);checked是表单里面的多选择。disabled=====》这个意思是禁用的意思。操作表单的属性。name，value，type，checked，selected，readonly，disablet。如何阻止超链接跳转：document.getElementById("id").onclick=function()代码团；returnfalse事件单词（新）：鼠标进入：onmouseover。鼠标离开：onmouseout。通过属性的值来获取标签：document.getElementByName("属性值");通过标签的类名字获取：document.getElementsByClassName("类名");新的事件单词：获取焦点事件：onfocus失去焦点事件：onblur设置文本类容的方法有三种：（双标签里）1.innertext。（IE8的标准）2.innerHTML。（推荐使用这个。兼容性好。而却可以设置HTML里面的标签。）3.textConcent。（火狐推出的标准）获取自定义属性：可以使用一个方法。设置：setAttribute（”属性名字“，“值”）获取：getAttribute（”定义的属性的名字“）。移除属性单词：removeAttribute（“属性名字”），可以移除所有属性，包括值。系统自己的或者用户自定义的。//第一个父节点；console.log(ulObj.parentNode);//第一个夫元素console.log(ulObj.parentElement);//所有的子节点。。console.log(dvObj.childNodes);//所有的子元素console.log(dvObj.children);console.log("=====================================");//第一个子节点console.log(ulObj.firstChild);//第一个子元素console.log(ulObj.firstElementChild);//最后一个子节点console.log(ulObj.lastChild);//最后的一个子元素console.log(ulObj.lastElementChild);//某个元素的前一个子节点console.log(my$(“three”).previousSibling);
//某个元素的前一个子元素
console.log(my$("three").previousElementSibling);//某个元素的后一个子节点console.log(my$(“three”).nextSibling);
//某一个元素的后一个子元素
console.log(my$(“three”).nextElementSibling);

创建元素的单词：
第一种方法：document.write(“标签元素”).
缺点在于页面加载后创建元素，原来的元素都没了。
第二种方法：.innerHTML=“标签元素”；
第三种方法： var obj=document.createElement(“标签名字”)
追加到一个元素里面成为u一个子元素
元素.appendChild(obj);{将 obj对象创建的标签追加到元素里面。}
为同一个元素绑定多个事件，不会冲突。
元素.addEventListener（“事件名字 click ”，function （）{ 代码团 }，false）
元素.attachEvent(){事件类型 onclick ,（命名）匿名函数 }
ie8不支持。
关于怎么解除事件的绑定：（用什么绑定就用什么解绑的。）
1.元素.null;(让这个元素的事件为空)
2. 元素.removeEventlistener(“事件的名字(没有on)”,需要命名函数,false)
3. 绑定：元素.attachEvent(“事件名字”,函数)
解绑： 元素.detachEvent（“事件名字”，函数）
如何阻止事件冒泡：
1.window.event.cancelBubble=true;IE特有的属性，谷歌和IE支持，火狐不支持。
2. 参数.stopPropagation();谷歌火狐支持
BOM：浏览器的事件

1. window. 页面加载完毕后的事件。
   2.window.onunliad=页面关闭过后的事件。
2. window.页面关闭之前的事件，
   location的用法：
   location.href=“网址”;设置跳转的网站地址。
   location.reload();重新加载–刷新。
   location.replace(“网址”)；跳转页面，替换掉之前的页面。
   定时器：
3. setInterval(函数,时间)：每隔多长时间运行一次函数。时间单位为毫秒，1000=1s；定时器的返回值就是定时器的ID，
4. 清除定时器：
   clearInterval（“定时器的ID”）。
   一次性的定时器：
   1.创建定时器：setTimeOut(函数,时间)。
   2.清理定时器：clearTimeOut(定时器ID)。
   新的属性：offset：
   offset后面可以接很多属性如：offsetLeft。
   offset的属性特性：
   在元素没有脱离文档流时：offsetLeft（会根据父元素的margin，padding，left而改变最终的值。）；offsetTop 也是同理。
   参数.clientX。直视x坐标
   参数.clientY。直视y坐标
   scroll系列属性：
   scrollwidth：元素的实际宽度度，（没有边框）。
   scrollheight：元素的实际高度（）不包括边框。
   scrollTop：向上卷出去的距离。（滚动条）
   scrollLeft：向左卷出去的距离。overflow：auto；（）滚动条。
   scroll系列的兼容代码：
   以下是获取浏览器向上滚动条卷出去的距离。
   、 scrollTop=window.pageYoffset;
   scrollTop=document.documentElement.scrollTop;
   scrollTop=document.body.scrollTop;
   滚动事件：onscroll。
   除了offsetLeft求当前的位置，还可以用其他的： 1. window.getComputeStyle（要找left的元素，null也可以不写）.left；不支持IE8.
5. 元素. currentStyle.left 。（这是IE8可用的方法，谷歌和火狐不嫩用）
   client的使用和属性。
   类似于offset类型：
   client表示的是可视区域的距离。
   1.height 和width 都不包含边框的距离。
   2.top和left 包括边框的宽度。