JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。本文记录了一些常用的知识点。

DOM重点核心

控制台

• console.log()     打印信息
• console.dir()     打印元素对象,更好的查看里面的属性和方法

获取元素

• getElementById(idName)    通过id获取元素
• getElementsByTagName(‘tagName’)    通过标签获取元素对象集合，以伪数组形式储存
• element.getElementsByTagName(‘tagName’)     获取某个父元素内部子元素对象集合，父元素必须为单个对象
• getElementsByClassName(‘className’)    通过类名获取元素对象集合
• querySelector(‘选择器’)    根据选择器获取第一个元素对象，选择器需要加符号#idName .Class tagName
• querySelectorAll(‘选择器’)    根据选择器获取所有元素对象集合
• document.body    获取body元素
• document.documentElement    获取html元素

事件基础

事件由三部分组成：事件源.事件类型 = 事件处理程序

btn.onclick = function(){
    alert('点击事件')；
}

• onclick—————-鼠标左键单击 执行完鼠标按下和抬起两个动作,才会触发
• ondblclick————鼠标左键双击
• oncontextmenu——鼠标右键单击
• onmousedown——-鼠标按下 永远只会执行一次
• onmouseup———-鼠标抬起
• onmousemove——-鼠标移动
• onmouseover——–鼠标移入
• onmouseout———鼠标移出
  【注】经过当前绑定事件的标签,以及标签的子级元素,都会触发事件；经过当前标签,只触发移入或者移出；经过子级标签:移入子级,触发,先移出当前标签,再进入子级标签；移出子级,触发,先移出子级标签,再进入父级标签。
• onmouseenter——鼠标移入
• onmouseleave——鼠标移出
  【注】只有经过当前标签的边界线时会触发程序的执行经过子级标签时,不会触发。

操作元素

• element.innerText    元素文本内容(不包含html标签)
• element.innerHtml   元素文本内容(包含html标签)
• element.属性    元素自身属性值
• element.getAttribute(‘属性’)    除了获得自身属性，还能获得自定义属性
• element.setAttribute(‘属性’,’值’)    设置属性值
• element.style    行内样式操作，样式名称采取驼峰命名法
• element.className    类名操作,会覆盖原来的类名

节点操作

• node.nodeType     元素节点为1   属性节点为2   文本节点为3
• node.parentNode    父节点
• parentNode.childNodes     所有的子节点集合，伪数组，包含元素节点 文本节点等等
• parentNode.firstChild     第一个子节点，包含元素节点 文本节点等等
• parentNode.lastChild     最后一个子节点，包含元素节点 文本节点等等
• parentNode.children     所有的子元素节点集合，伪数组
• parentNode.firstElementChild     第一个子元素节点，考虑兼容性用children[0]
• parentNode.lastElementChild     最后一个子元素节点,考虑兼容性用children[children.length-1]
• node.nextSibling     下一个兄弟节点，包含元素节点 文本节点等等
• node.previousSibling     上一个兄弟节点，包含元素节点 文本节点等等
• node.nextElementSibling     下一个兄弟元素节点
• node.previousElementSibling     上一个兄弟元素节点
• document.createElement(‘tagName’)     创建元素节点，需要添加节点才能生效
• parentNode.appendChild(child)     将一个节点添加到父节点的子节点列表末尾
• parentNode.insertBefore(child,指定元素)     将一个节点添加到父节点的指定子节点前面
• parentNode.removeChild(child)     删除一个子节点，返回删除的节点
• node.cloneNode()     返回调用该方法节点的一个副本，克隆节点，参数为空/false,只克隆标签，不可隆标签里的内容，参数为ture，克隆标签与里面的内容
• document.write()     页面重绘

高级事件

注册与删除事件

注册事件

注册事件有两种方式：传统方式和方法监听注册方式。请继续关注飞鱼ACG，后续我们将更新更多实用教程。

传统注册方式：以on开头的事件onclick等。

特点：注册事件的唯一性。(同一个元素同一个事件只能设置一个处理函数，后面注册的处理函数会覆盖前面注册的处理函数。)

方法监听注册方式：addEventListener()、attachEvent()

特点：同一个元素同一个事件可以注册多个监听器。

eventTarget.addEventListener(type, listener, useCapture)

type: 事件类型字符串，比如click、mouseover等，不需要加on。

listener:事件处理函数。

useCapture: 可选参数，false或者空参数表示冒泡，ture表示捕获。

删除事件

传统删除方式：eventTarget.onclick = null

方法监听删除方式：eventTarget.removeEventListener(type, listener[, useCapture])

未完待续……