个人总结JavaScript操作和方法

JavaScript分三个部分           
    ECMAScript - JavaScript的核心          
    BOM - 浏览器对象模型          
    DOM - 文档对象模型

BOM

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window

注意：window下一个特殊的属性 window.name

 定时器:
       setInterval(匿名函数,毫秒)
       参数1:匿名函数----要重复的代码
       参数2:毫秒--------有周期性的执行一次参数1的内容

       setTimeOut(函数,时间)
       页面加载完后,过一段时间,就执行函数,只执行一次

一、location对象
1、location是window和document的属性，window.location等价于document.location

2、包含的属性：
hash、host（含端口号的主机名）、hostname（不含端口号的主机名）、
href（等价于location.toString()方法）、pathname、port、protocol、search

.

二、history对象
1、go(n)：
在用户的历史记录中任意跳转（这里的历史记录不同于浏览器设置中的历史记录，而
是当前标签页的历史记录），n是一个数字，负数表示后退，正数表示前进，例如在
后台中的返回按钮就很能用上
2、back()
加载 history 列表中的前一个 URL。
3、forward()
加载 history 列表中的下一个 URL

 

DOM

1. 获取元素
2. 动态创建元素
3. 对元素进行操作(设置其属性或调用其方法)
4. 事件(什么时机做相应的操作)

DOM节点分为三大类:元素节点(标签节点)、属性节点和文本节点.

一.查看元素节点:使用getElement系列方法 

1.通过ID来查看元素属性

        var li = document.getElementById("first");  
2.通过类名来查看元素属性
        var lis1 = document.getElementsByClassName("cls");
3.通过名字来查看元素属性
         var lis2 = document.getElementsByName("name");
4.通过标签名来查看元素属性
         var lis3 = document.getElementsByTagName("li");

二.通过querySelector系列方法

传入一个选择器名称，返回第一个找到的元素。 通常用于查找ID：
var dq1 = document.querySelector("#id");
 传入一个选择器名称，返回所有找到的元素，无论找到几个，都返回数组格式。这种方法比较全能，不管什么属性都可以准确地找到。 
var dqs1 = document.querySelectorAll("#div1 li");

 

JS修改CSS的多种方式

 1.使用setAttribute设置class和style。
       document.getElementById("first").setAttribute("class","red");
       document.getElementById("first").setAttribute("style","color:red;");

2.使用.className添加一个class选择器
        document.getElementById("first").className = "class1";

3.使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
        document.getElementById("first").style.fontSize = "18px";

4.使用.style 或 .style.cssText 添加一串行级样式：
         document.getElementById("first").style.cssText = "color:red;";

查看/设置文本节点

document.getElementById("first").innerHTML: 取到或设置一个节点中的HTML代码。
document.getElementById("first").innerText: 取到或设置一个节点中的文本，不能设置HTML代码。

节点属性
     1.NodeType: 节点类型:1-----表示标签 2-----表示属性 2---文本
     2.NodeName: 节点的名字  标签----大写标签名  属性----小写的属性文本节点
     3.NodeValue: 节点值: 标签--null 属性--属性值  文本---文本内容

父级元素和节点
    获取父级元素和父级节点
    var parentObj=document.getElementById('sp');
    获取父级元素
    console.log(spObj.parentElement);
    获取父级节点
    console.log(spObj.parentNode);

子级元素和节点
    var ulObj = document.getElementById('uu');
    var liObj = document.getElementById('ll');
    获取第一个子级元素,第一个节点
    console.log(ulObj.firstElementChild);//------>ie8不支持
    console.log(ulObj.firstChild);//在ie8中得到是第一个子集元素

    获取最后一个子级元素,最后一个节点
    console.log(ulObj.lastElementChild);//------>ie8不支持
    console.log(ulObj.lastChild);//在ie8中得到是最后一个子集元素

    获取li的上一个兄弟元素,上一个兄弟子级
    console.log(liObj.previousElementSibling);//------>ie8不支持
    console.log(liObj.previousSibling);//在ie8中得到是上一个兄弟子集元素

    获取li的下一个兄弟元素,下一个兄弟子级
    console.log(liObj.nextElementSibling);//------>ie8不支持
    console.log(liObj.nextSibling);//在ie8中得到是下一个兄弟集元素

事件

addEventListener('不带on的事件类型,事件处理函数,false')
attachEvent('带on的事件函数',事件函数)

事件的阶段
       1.捕获阶段:由外向内
       2.当前目标阶段:选择触发事件的元素
       3.冒泡阶段: 由内向外

oncl ick ---鼠标点击时触发此事件
ondblclick---鼠标双击时触发此事件
onmousedown----按下鼠标时触发此事件
onmouseup---鼠标按下后松开鼠标时触发此事件
onmouseover---当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout当鼠标离开某对象范围时触发此事件

页面相关
onbeforeunload当前页面的内容将要被改变时触发此事件
onerror出现错误时触发此事件
onload页面内容完成时触发此事件
onmove浏览器的窗口被移动时触发此事件
onresize当浏览器的窗口大小被改变时触发此事件
onscrol l浏览器的滚动条位置发生变化时触发此事件

 

偏移量

一，offset系列

offsetWidth：获取元素的宽。
offsetHeight: 获取元素的高.
offsetHeight = height + padding + border

offsetLeft获取元素到父级元素的左边距
offsetTop获取元素到父级元素的上边距

1，到距离自身最近的（带有定位的）父元素的 左侧/顶部
2，如果所有父级元素都没有定位，则以body为准
3，offsetLeft是自身border左侧到父级padding左侧的距离

offsetParent 返回该对象距离最近的带有定位的父级元素如果当前元素的所有父级元素都没有定位（position为absolute或relative），那么offsetParent为body

二，scroll系列

scrollWidth: 获取元素实际内容的宽度，如果内容没有沾满元素的一行，获取的是元素的宽度(包括padding,不加边框)
scrollHeight:获取元素实际内容的高
scrollTop:卷曲上去的值
scrollleft:向左卷曲出去的值

三，client系列
clientWidth:可视区域的宽(不包含边框),边框内部的宽度
clientHeight:可视区域的高(不包含边框),边框内部的高度
clientLeft:左边边框的宽度
clientTop :上面的边框的高度