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

---

正则