js中的BOM,DOM知识点

js的组成:
ECMAScript 解释器、翻译 兼容性：完全兼容
BOM 浏览器对象 兼容性：不兼容(例如IE，谷歌，火狐，不可能兼容)
DOM 文档对象 兼容性：部分不兼容

BOM(Browser Object Model) 浏览器对象模型
BOM是js的核心 window,window对象就是浏览器内置的一个对象，表示浏览器中打开的窗口，不同的窗口不共用window

BOM中经常使用的属性
navigator 记录浏览器信息
history 记录浏览访问的历史信息
location 记录地址信息
document 文档对象

navigator

 userAgent   	 浏览器用于HTTP请求的用户代理头部的值,表示了当前网站所处的环境

history

length       	当前窗口的历史记录长度,即总共打开了几个窗口
forward()    	页面前进
back()       	页面后退
go(step)     	 页面跳转,step的值可以控制其向前或向后跳转多少个页面,正直为向向前跳,负值向后跳,  go(0) 刷新当前页面

location

href ()        	设置或返回地址栏的url
search()     	设置或返回地址栏中?之后的参数数据
reload()    	刷新页面
assign(url)  	旧的文档跳转到新的文档，可以被history记录
replace(url) 	用新的文档替换当前文档，覆盖当前的history,即length的长度不发生改变
hash()  		返回浏览器地址的#后面的位置
host()		由主机名(hostname)+端口(port)组成
pathname()     当前文件路径
open()    		打开新窗口
close()    		关闭当前窗口

onload() 在页面完全载入后触发的才触发的事件,(包括图片、css文件等等)时触发此事件)

例:

	window.onload = function () {
 			console.log(666);
 }
    console.log(777);    //控制台先显示777,完全加载后显示666

onscroll 在页面发生滚动（鼠标或者滚动条）时触发此事件
例:

window.onscroll = function () {
    			console.log(666);
  			}

onresize() 可视区域窗口大小发生变化时触发此事件

       例:window.onresize = function () {
    console.log(777);
  }

DOM(Document Object Model)文档对象模型
当浏览器载入HTML文档, 它就会成为document对象,document对象是HTML文档的根节点，document对象使我们可以从脚本中对HTML页面中的所有元素进行访问,
documentElement 根节点
body 页面内容
head 头部
title 页面标题(可读可写)

console.log(document.documentElement);
console.log(document.body);
console.log(document.head);
console.log(document.title);

获取浏览器可视窗口的宽高 clientWidth/clientHeight

  console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)

获取页面的实际宽高scrollWdith/scrollHeight

console.log(document.documentElement.scrollWidth, document.documentElement.scrollHeight)

获取或设置根元素的内容垂直(水平)滚动的距离scrollTop/scrollLeft

console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);

例题 使滚动条自动滚动到顶部

var oBox = document.getElementById('box');
  var timer;
  oBox.onclick = function () {
    var html = document.documentElement || document.body;
    clearInterval(timer);  // 1.全局变量  2.先清再设,防止重复按动按钮时重复调   用 time方法
    timer = setInterval(function () {
    	html.scrollTop -= 10; 
      	if (html.scrollTop <= 0) {
        clearInterval(timer);
      }}, 1)}

例题 使滚动条滚动到底部时控制台显示到达顶部

 var html = document.documentElement || document.body;
 var maxTop = html.scrollHeight - html.clientHeight;//滚动条能滚动的最远距离为页面的实际宽高-浏览器可视窗口的宽高
 	 window.onscroll = function () {
    	var scrollTop = html.scrollTop;
   		 if (scrollTop >= maxTop) {
     	 console.log('到底了');
    } }

Dom常用操作
增:

document.createElement()	//创建元素
parent.appendChild() 	//尾部插入
parent.insertBefore(new,old) 	//从元素前插入
parent.innerHTML=''

删:

ele.remove()	//删除自己
parent.removeChild(Child) 	//删除子元素
parent.innerHTML=''

查:

document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()
//以下两种方法支持选择器
document.querySelector(selector)  	//得到的是满足条件的第一个元素
document.querySelectorAll() 			//得到的是满足条件的所有集合

元素的替换

parent.replaceChild(newEle, oldEle)

修改:
对内容的修改 表单: ele.value
非表单: ele.innerText=’ ’ (结果只为文本)
ele.innerHTML=’ ’ (结果包含标签)

属性 固有属性(元素对象的属性) ele.attribute (ele.src)
ele[attribute] (ele[attribute])

两者之间的区别:.后面只能为属性值,不能为字符串
[]内的attribute可以为变量,而.后不可以

当设置的属性为class时,应写成ele.className,但是此方法相对复杂,可直接用

classList得到class的集合,其包含3个属性

ele.classList.add();
ele.classList.remove();
ele.classList.replace(old.new)

自定义属性(人为的,手动写在标签上的属性,HTML本身不支持)
以下三种方法既可以操作固有属性,又可以操作自定义属性

    ele.getAttribute(属性名)
    ele.setAttribute(属性名.属性值) //本身自带新增功能
    ele.removeAttribute(属性名)

disabled 禁用表单元素
selected 下拉框
checked 单选,复选框
以上三种的值全为boolean类型

disable一秒前禁用,一秒后可用

checked一秒前不选中,一秒后选中

selected一秒前默认下拉框选中oPtions[1],一秒后默认为oPtions[0]

样式:

ele.style.property=value
property内的值不支持-,当出现-时,将其去掉,并采用驼峰命名法,例font-size为fontSize
获取元素样式
ele.style.property //行内样式
现代浏览器
getComputedStyle()[]
IE浏览器
ele.currentStyle[]或ele.currentStyle.
兼容性问题的写法:

function getStyle(ele,property){
        if(getComputedStyle){
            return getComputedStyle(ele)[property];
        }else{}
            return currentStyle[property];
    }

getComputedStyle是函数的定义,判断该函数是否存在,getComputedStyle()是函数的声明,将运行该函数,所以上述兼容性写法使用getComputedStyle

元素样式宽,高 width / height
元素内容宽,高 ele.clientWidth / ele.clientHeight padding+width / padding+height
实际宽,高 ele.offsetWidth / ele.offsetHeight padding+border+width /padding+border+height
相对父元素的距离 ele.offsetTop / ele.offsetLeft

节点问题:

元素节点 nodeType —> 1
nodeValue —> null
nodeName —> DIV/P/LI …是哪个元素结果就为哪个

属性节点 nodeType —> 2
挂在元素身上 nodeValue —> demo 属性值
nodeName —> class 属性名
var oClass=oDemo.getAttributeNode(‘class’) //获取属性节点

文本节点 nodeType —> 3
nodeValue —> 文本内容
nodeName —> #text
childNodes:获取当前元素的所有子节点,所有内容都是一个节点,空格,换行也是节点
var oDemo.childNodes

注释节点 nodeType —> 8
(不重要) nodeValue —> 注释内容
nodeName —> #comment

childern:获取当前元素的所有子元素节点
parentNode:获取当前元素的父元素节点
firstElementChild:获取当前元素的第一个子元素节点
lastElementChild:获取当前元素的最后一个子元素节点
nextElementSiblig:获取当前元素的下一个兄弟元素节点(IE6,7,8不支持)
previousElementSiblig:获取当前元素的下一个兄弟元素节点(IE6,7,8不支持)

nextSibling:获取当前元素的下一个兄弟节点
previousSibling:获取当前元素的上一个兄弟节点

例:

<body>
    <ul id="ulya">哈哈哈哈哈
        <li>1</li><!--哒哒哒哒--><li>2</li><li>3</li><!--哒哒哒哒--><li id="demo" class="hha">啦啦啦啦啦</li>
        <li id="demo">5</li>
    </ul>
</body>

<script>
    //元素节点
    var lili=document.getElementById("demo");
    console.log(lili.nodeType);
    console.log(lili.nodeValue);
    console.log(lili.nodeName);
    //属性节点
    var lilis=lili.getAttributeNode('class');
    console.log(lilis.nodeType);
    console.log(lilis.nodeValue);
    console.log(lilis.nodeName);
    //文本节点
    var liliss=document.getElementById("ulya").childNodes;
    console.log(liliss);
    console.log(liliss[0].nodeType);
    console.log(liliss[0].nodeValue);
    console.log(liliss[0].nodeName);
    //注释节点
    console.log(liliss[2].nodeType);
    console.log(liliss[2].nodeValue);
    console.log(liliss[2].nodeName);
    //所有子元素节点
    var haha=document.getElementById("ulya").children;
    console.log(haha);
    //父元素节点
    console.log(lili.parentNode);
    //第一个子元素节点
    var hahah=document.getElementById("ulya");
    console.log(hahah.firstElementChild);
    //最后一个子元素节点
    console.log(hahah.lastElementChild);
    //下一个兄弟元素节点
    console.log(lili.nextElementSibling);
    //前一个兄弟元素节点
    console.log(lili.previousElementSibling);
    //下一个任意节点
    console.log(lili.nextSibling);
    //上一个任意节点
    console.log(lili.previousSibling);
</script>

结果: