JavaScript知识点记录

HTML DOM介绍

网页被加载时,浏览器会创建页面的文档对象模型(document object model)
DOM可以对页面元素进行增删改查.

查找HTML元素

document.getElementById() 通过ID来查找
document.getElementsByClassName() 通过类名获取的是一个类数组
document.getElementsByTagName() 通过标签名获取的是一个类数组

可以通过JavaScript来创建动态的HTML.

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

节点

node 节点树形结构里面的成员，都称之为节点
节点的类型：
nameName nodeValue nodeType
标签(元素)节点页面上的元素 1
属性节点标签的属性 2
文本节点(空格、回车、文本) 文本节点 3
注释节点就是页面中被注释掉的内容 8

节点层次

父节点 parentNode
子节点 childNodes 获取到的是元素节点和文本节点
children 只会获取元素子节点
兄弟节点

下一个兄弟节点
node.nextSibling 可以是元素/属性/文本节点 ie8以下只能获取到元素/非空文本节点
node.nextElementSibling 只获取元素节点 ie8以下不兼容

//    处理兼容的函数
    function getNextElementNode(element) {
        var nNode = null;
        if(element.nextElementSibling){
            nNode = element.nextElementSibling;
        }else {
           nNode = element.nextSibling;
            while(nNode && nNode.nodeType != 1){
                nNode = nNode.nextSibling;
            }
        }
        return nNode;
    }

上一个兄弟节点
node.previousSibling 可以是元素/属性/文本节点 ie8以下只能获取到元素/非空文本节点
node.previousElementSibling 只获取元素节点 ie8以下不兼容

firstChild lastChild 获取第一个/最后一个(元素文本属性)节点 ie8下忽略空文本节点
firstElementChild lastElementChild 获取第一个/最后一个元素子节点 ie8下不支持
子元素的数量
childElementCount 获取节点下所有子元素的个数 ie8不支持
使用 parent.children.length

节点操作

创建元素

document.write 想body输出一个元素或者文本覆盖之前的
document.write("")
innerHTML 可以向某个node添加子元素,覆盖之前的
node.innerHTML=""
document.createElement 创建一个想要的标签,得到一个元素节点对象
var div = document.createElement("div") 创建后,存在内存里

克隆

node.cloneNode(deep)
deep:是否深度克隆(后代元素也复制过来) (为防止兼容问题,不要省略deep)
ps: 克隆节点需手动添加进结构中克隆id也相同

追加

parentNode.appendChild(childNode)
子节点追加在父节点的最后
如果子节点存在结构中,追加后,原位子不存在了

插入元素

parentNode.insertBefore(newChild,oldChild)

删除元素

parentNode.removeChild(childNode)

替换元素

parentNode.replaceChild(newChild,oldChild)

事件

事件就是浏览器发生点击/鼠标移入..某个元素时发生的.事件分为:触发-用户或浏览器触发一个事件. 响应-执行某个函数.
时间三要素谁(页面元素) 做了什么(事件类型) 怎么做(处理函数)

注册事件

行内式写在标签属性内
<input type='button' value='点击' onclick='fn()'>
on node.on+事件类型=fn 缺点:只能注册一次事件
addEventListener方式可以为对象注册一个事件,执行多个函数

常用事件

onclick 鼠标单击 ondblclick 鼠标双击
onkeydown 键盘按下触发 onkeyup
onchange 文本内容或下拉菜单选项变化时
onfocus 获得焦点
onblur 失去焦点
onmouseover onmouseout 鼠标移入移除
onload 文档加载完成 onunload 关闭网页触发
onsubmit 表单提交事件
兼容性:ie6 7 8不支持

    node.addEventListener("click",function () {
        alert("test");
    },false);

attachEvent
兼容性:ie 6 7 8支持

    node.attachEvent("onclick",function () {
        alert("test");
    })

注册事件的兼容写法

    function addEventListener(element,eventName,fn) {
        if(element.addEventListener){
            element.addEventListener(eventName,fn,false);
        }else {
            element.attachEvent("on"+eventName,fn);
        }
    }

    addEventListener(btn,"click",function () {
        alert("");
    })

事件的三个阶段

事件捕获阶段事件由外而内的阶段
事件目标阶段
事件冒泡阶段事件触发由内而外的阶段
事件只会存在捕获和目标 / 冒泡和目标这2个阶段捕获和冒泡不会同时出现
事件冒泡的影响子元素和父元素注册了同样的事件，如果子元素触发了事件，那么父元素也会触发
阻止事件冒泡
ie/谷歌 window.event.cancelBubble=true
谷歌/火狐 event.stopPropagation()

事件的类型

event.type 返回不带on的事件名称

排他方法

    function  exclusive() {
//        1 先把所有的按钮的value都改成2
        for (var j = 0; j < btns.length; j++) {
            btns[j].value = "2";
        }
//        2 还要把点击的按钮变成1
        this.value = "1";
    }

获取和设置文本

innerHTML 用来获取或设置某个元素的内容(包括标签) 所以主流浏览器都支持
innerText 用来获取或设置某个元素内容(只能得到文本)

兼容性:早期火狐不支持innerText,支持textContent

    //兼容写法
    function setInnerText(element,text) {
        if(element.innerText !== undefined){
            element.innerText = text;
        }else {
            element.textContent = text;
        }
    }

DOM操作元素的样式

设置元素的className属性 node.className="" 配合css使用
设置元素的样式 node.style.attr="value" 实际作用于style的行内式中,只能获取到行内样式.

定时器

setTimeout

让浏览器延时一定时间后执行一个函数
var id = setTimeout(function(){},time) time-毫秒
clearTimeout(id) 清除对应的setTimeout

setInterval

让浏览器隔一段时间就执行一次函数
var id = setInterval(function(){},time) time-毫秒
clearInterval(id)

offset

相对于 offsetParent 的偏移量. 一般是body的左上角. 脱标定位:相对谁定位,offsetParent就是谁. fixed: offsetParent 为null 相对于浏览器可视区域左上角
width/height:padding+border+content

offsetLeft offsetTop offsetWidth(元素实际宽度) offsetHeight

scroll

滚动相对于父元素

scrollLeft scrollTop(滚动出去的距离)
scrollWidth scrollHeight 如果元素宽度/高度大于内容宽度/高度,返回元素的宽度/高度(不包括滚动条),否则返回元素内容的宽度/高度

client

可视区域元素的大小或者浏览器

clientTop clientLeft clientWidth clientHeight
可视区域坐标 clientX clientY
pageX pageY 页面坐标

事件对象的兼容 event=window.event || event

getComputedStyle 获取元素的所有计算过后的样式对象window.getComputedStyle(element,pseudoElt)
currentStyle 获取元素的所有计算过后的样式对象element.currentStyle