JS基础知识（dom，bom操作）

JS基础知识（dom，bom操作）

• javascript分为三个部分

  1. ECMAScript基础语法（核心）：提供核心语言功能
  2. DOM(document object model)（文档对象模型）：提供访问和操作网页内容的接口和方法。
  3. BOM（浏览器对象模型）：提供和浏览器交互的方法和接口。

原生JS操作dom（用js来控制页面中的标签）

• Dom:Dom给我们提供了一些方法，让我们可以使用js来控制页面中的标签，JavaScript 获得了足够的能力来创建动态的 HTML
  
  • JavaScript 能够改变页面中的所有 HTML 元素
    JavaScript 能够改变页面中的所有 HTML 属性
    JavaScript 能够改变页面中的所有 CSS 样式
    JavaScript 能够对页面中的所有事件做出反应

• 常用的dom方法：

  • document.getElementById(‘box’);//通过id获取标签
  • document.getElementsByTagName(“div”);//通过标签名获取页面元素
  • document.getElementsByclassName(“box1”)//根据类名class获取页面元素

  • window.onload()中的代码会在页面完全加载后执行。

    注意：
    由于获取结果可能是多个，element后面要加s根据标签获取的结果是伪数组形式，伪数组是不具备数组的方法。要操作伪数组中的所有元素需要遍历伪数组。根据标签名获取元素时，有可能获取到的标签只有一个，但是形式还是伪数组。根据标签名获取时，document可以更换为任意标签.在box中获取li标签。
    注意： 根据id获取的时候，前面只能写document

    
//想要获取box中的li,首先获取box
var box = document.getElementByID("box");
var lisBox = box.getElementsByTagName("li");
console.log(lisBox);
for(var i=0;i<lisbox.length;i++) {
lisbox[i].innerHtml="我是box中的li";
}

• 设置标签的样式方法（改变CSS,改变HTML的属性，内容）：

  • 对标签的样式设置使用.style
  • 设置标签的内容： .innerHtml

  • 设置标签的属性： .src
    var box=document.getElementById("box");
box.style.width="100px";
box.style.backgroundColor="#ff00000"//带有短横线的属性要是用驼峰命名的方式。

    <p id="p1">Hello World!</p>
document.getElementById("p1").innerHTML="New text!";

    <img id="image" src="smiley.gif">
document.getElementById("image").src="landscape.jpg";

• Dom事件类型：
  
  • 点击事件 onclick
  • 鼠标移入 onmouseover
  • 鼠标移除 onmouseout
  • 鼠标点击 onmousedown
  • 鼠标释放点击 onmouseup
  • 用户进入页面 onload（事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本）
  • 用户离开页面onunload （onload 和 onunload 事件可用于处理 cookie）
  • 当用户改变输入字段的内容（对输入字段的验证）onchange
• 类名属性： 访问标签的类名属性通过 标签.className
• 标签默认事件：某些标签具有默认的效果，有时候我们不想要这种效果，可以在事件最后加上return false

 link.onclick = function() {
   alert('今天天气好');
   return false;//通过returnfalse 取消标签的默认效果
 }

• 循环添加事件：当我们进行循环添加事件的时候，在事件内部不能使用i，因为i的值已经是循环的结束条件那个值了（根据循环设置的具体情况而定）。

<script>
var box=document.getElementsByClassName("box");
for(var i=0;i<box.length;i++){
    box[i].onclick=function () {
        alert(this.innerHTML);
    }
}
</script>

• 焦点事件：

onfocus 文本框获取焦点时触发事件 
onblur 失去焦点时触发事件 
表单的常用属性： 
input获取内部文本 使用value ipt.value

• 表单的属性：（不太常用）禁用表单 ipt.disabled 可以给表单禁用。设置值为true表示禁用，false表示启用复选框选中 cb.checked 值为true表示选中 值为false表示没选中 下拉菜单选中 doudou.selected 值为true表示选中，为false表示没选中
• Dom节点：添加和删除节点（HTML 元素）
  //添加节点
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p"); //创建p元素
var node=document.createTextNode("这是新段落。");//创建文本节点
para.appendChild(node);//向<p> 元素追加这个文本节点
var element=document.getElementById("div1");//向一个已有的元素追加这个新元素(找到已有元素)
element.appendChild(para); //追加新元素
</script>
//删除节点
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

Dom的高级补充（offset，scroll，client）

• offset系列

  • offsetWidth和offsetHeight: 用来得到对象的大小
  • offsetHeight和style.height的区别：
    
    • demo.style.height只能获取行内样式，如果样式写到了其他的地方，甚至根本就没写，便无法获取。
    • style.height是字符串，并且带单位，offsetHeight是数值
    • demo.style.height可以设置行内样式，offsetHeight是只读属性
    • 所有一般用demo.offsetHeight来获取某元素的真是宽度或高度，用demo.style.height来设置宽度或高度。
  • offsetHeight的构成：offsetHeight=height+上下padding+上下border(不包括上下外边距margin)
  • offsetwidth同理
  • offsetLeft:距离自身最近的（带有定位的）父元素的 左侧/顶部 的距离

  • offsetTop:距离自身最近的（带有定位的）父元素的 左侧/顶部 的距离

    注意：没有offsetRight和offsetBottom
    offsetLeft 是自身border左侧到父级padding左侧的距离

  • offsetLeft和style.left的区别：

    • style.left只能获取行内样式
    • offsetLeft是只读，style.left可读可写
    • offsetLeft是数值，style.left是字符串并且有单位px
    • 如果没有加定位，style.left获取的数值可能是无效的
    • 最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准

  • offsetParent:表示某个标签外面定位的父盒子（不一定是父节点，也可能是爷爷）

    注意：区分offsetParent 和 parentNode
    所有的属性都是只读属性，获取的结构是数值类型

    console.log(box2.offserParent)//可能是定位的干爹，最近的一个定位的父元素
console.log(box2.parentNode)//一定是亲爹


• scroll系列
  
  • scrollHeight和scrollWidth:标签内部实际内容的高度或宽度
    不计算外框，如果内容不超出盒子，值为盒子的宽高（不带边框）
  • scrollTop和scrollLeft:被卷去部分的顶部/左侧 到可视区域顶部/左侧的距离
  • 获取页面滚动坐标
    
    • 页面滚动坐标非常常用：但是有很大的兼容性问题，可以合写为
      
varscrollTop=window.pageYOffset||document.documentElement.scrollTop || document.body.scrollTop || 0;

  • 封装自己的scroll(): 由于很常用，每次都写上面一堆很麻烦，所以模仿jQuery封装一个自己的scroll()方法，返回页面滚动坐标
    
//通过下面这个函数可以得到页面卷曲的高度/宽度
function scroll () {
return {
scrollTop:window.pageYOffset || document.documentElement.scrollTop||ducument.body.scrollTop||0,
scrollLeft:window.pageXOffset || document.documentElement.scrollLeft||ducument.body.scrollLeft||0,
}
}

  • 固定导航案例：
    
    • 当页面向下滚动的时候 进行判断 如果页面向上走的距离 大于导航栏到页面顶部的距离时 将导航栏的定位改为固定定位
    • 小问题：当导航栏改为固定定位的一瞬间，后面的元素会塌陷。解决方案：给下面的元素添加数值为导航栏高度的padding-top
• client系列
  
  • clientWidth和clientHeight:
    
    • 总结：偏移offsetWidth: width + padding + border
      卷曲scrollWidth: width + padding 不包含border 内部内容的大小
      可视clientWidth: width + padding 不包含border
  • clientTop和clientLeft:
    
    • clientTop和clientLeft没用 ,他们就是borderTop和borderLeft（如果有滚动条会包含滚动条的宽度，但谁见过滚动条在顶部或者左侧的？！）
  • 网页可视区宽高：
  • 网页可视区宽高的兼容写法：页面可视区宽高非常有用，但是有很大的兼容性问题，可合写为：
    
var clientWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0;

  • 封装自己的client():封装自己的scroll(): 由于很常用，每次都写上面一堆很麻烦，所以模仿jQuery封装一个自己的client()方法，返回可是去宽度和高度

function client(){
    return clientWidth : window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0,
    clientHeight = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight|| 0;
}

• 体会响应式布局的原理：当我们的页面宽度 大于 960 像素的时候 页面为红色并显示computer 当我们的页面宽度 大于 640 小于 960 页面为绿色并显示tablet 剩下的页面为蓝色并显示mobile
• 三大系列总结：
  
offsetWidth scrollWidth clientWidth
offsetHeight scrollHeight clientHeight
offsetLeft scrollLeft clientLeft
offsetTop scrollTop clientTop
offsetParent scroll() client()
//offsetWidth=padding+border+内容
//scrollWidth=border


js中的BOM对象

• bom的基础知识
  
  • Bom - 浏览器对象模型
  • bom给我们提供了一些方法让我们可以使用浏览器的一些功能
  • bom的顶级对象是window，window的属性和方法都可以不加window进行使用
  • window的一些常用方法有：alert(),window(),confirm(),prompt()(上面的提示词，默认文本)
• 全局变量
  
  • 设置了全局变量，这个变量就相当于window的一个属性
    
var num=100;//此处的num是一个全局变量。
//设置了一个全局变量，这个全局变量就相当于是window的一个属性
window.num;

• open()和close()额方法
  
  • window.open(url,target,param)参数均为字符串格式
    
    • url:要打开的地址
    • target:新窗口的位置_blank _self
    • param:新窗口的一些设置 “width=300,height=200”
    • 返回值：新窗口的window对象
    • window.close()关闭窗口，使用哪个window对象进行调用，就关闭谁
      
window.open("http://www.baidu.com","_blank");
//第三个参数不传就是和当前窗口大小一样

• localtion属性

location.href  跳转
location.assign(url) 跳转到新页面
location.replace(url) 跳转到新页面，无法回退
location.href和location.assign的作用是一样的。
location.reload(); 刷新页面
console.log(window.location.href);//地址栏的地址
console.log(window.location.hash);//#+锚点（不包括？号后面的）
console.log(window.location.host);//ip+端口
console.log(window.location.hostname);//ip或者是域名
console.log(window.location.pathname);//端口后面的地址
console.log(window.location.port);端口
console.log(window.location.protocol);//协议
console.log(window.location.search);//?+后面的参数

• navigator属性

window.navigator.userAgent 获取一些浏览器的信息 
window.navigator.platform 运行平台 
platform 属性是一个只读的字符串，声明了运行浏览器的操作系统和（或）硬件平台。 
虽然该属性没有标准的值集合，但它有些常用值，比如 “Win32”(windos操作系统)、”MacPPC（mac）” 以及 “Linuxi586”，等等。 

• history属性

history.go(1) 表示前进一个页面 
history.go(-1) 表示后退一个页面 
history.forward() 表示前进 
history.back() 表示后退 

• 定时器
  
  • setTimeout(要执行的代码，设定的时间)超时，在时间到达时触发设置的代码

var timer= setTimeout(function(){},1000); 

• 清除定时器Timeout:clearTimeout(定时器的标识)我们一般将定时器保存在变量中，以便清除使用

clearTimeout(timer);

• setInterval(执行的代码，间隔时间)每隔一段时间执行代码

var timer=setInterval(function(){},1000);

• 清除定时器

clearInterval(timer);