Dom随笔

js 声明对象

获得元素

document.getElementById('')

返回元素对象

document.getElementsByTagName('a');

返回伪数组(元素数组)

获取父元素下指定标签下子元素

element.getElementsByTagName('a');

HTML5

document.getElementsByClassName

document.querySelector('选择器')//返回第一个 .class #id tag

document.querySelectorAll('选择器')

document.body //body

document.documentElement //html

获取内容

element.innerText

起始到终止位置的内容，去除html标签，去除空格和换行

element.innerHTML（标准）

起始到终止位置的内容，不去除html标签，不去除空格和换行

li.innerText = text.value + 'del'; //sdssdsdsdel

li.innerHTML = text.value + 'del'; //sdssdsdsdel//识别标签

禁用元素

- element.disabled = true;

- btn.disabled = 'true';

直接修改

element.style.backgroundColor = 'black';//驼峰命名backgroundColor

box.style.display = 'none';

修改类

this.className = "c2";//更改类

this.className = "c1 c2";//保留原先类

获取元素属性值

element.属性//

element.getAttribute('id')//主要获得自定义属性

设置属性值

element.属性='';

element.setAttribute('属性','值');

移除属性

removeAttribute('属性')

自定义属性

H5规范： data-开头

data-time

获取H5自定义属性

兼容性获取 element.getAttribute('data-index')

H5新增 element.dataset.index/element.dataset['index']

element.getAttribute('data-index-name')

element.dataset.index/element.dataset['indexName']//驼峰命名法

dataset是一个集合，存放所有以data开头的自定义属性

nodeType

元素 1

属性 2

文本 3

父节点 parentNode 最近

div.parentNode

子节点 childNodes

所有的子节点 包含元素节点 文本节点等等

子元素节点

parentNode.children 获取所有子元素节点

firstChild 第一个子节点 包含元素节点 文本节点等等

lastChild 最后一个子节点 包含元素节点 文本节点等等

firstElementChild 子元素节点（兼容性问题）

lastElementChild 子元素节点（兼容性问题）

解决方法

children[0]

children[children.length-1]

兄弟节点

nextSibling 下一个兄弟节点 包含元素节点 文本节点

previousSibling 上一个兄弟节点 包含元素节点 文本节点

nextElementSibling 下一个兄弟元素节点（兼容问题）

previousElementSibling 上一个兄弟元素节点（兼容问题）

解决方法：自己封装一个兼容性函数

根据nodetype

创建节点

var li = document.creatElement('li');

添加节点

node.appendChild(child) //node 父级 先创建后添加 （添加原有节点，会移除原有节点）

node.insertBefore(child,指定元素)

var child = node.appendChild(child)//返回子节点

删除子节点

node.removeChild(child)

复制节点

node.cloneNode() 返回节点副本

()内参数为空或为false - 浅拷贝 只复制标签(节点及属性)不复制里面的内容(子节点)

()参数为true - 深拷贝 复制节点本身以及里面所有的子节点

动态创建元素

document.write()

document.write("")

文档流执行完毕（页面加载完） 再写入 会导致页面重绘

btn.onclick = function(){}

element.innerHTML //将内容写入页面的内容流

element.innerHTML=""//字符串

document.creatElement()

var a = document.creatElement('a');node.appendChild(a);

innerHTML 创建多个元素效率更高：

不要拼接字符串(每个循环执行element.innerHTML+="")，

采取数组形式拼接

creatElement() 创建多个元素效率稍微低，但结构更清晰

传统注册方式

以on开头 onclick...

唯一性

同一元素同一事件只能设置一个处理函数，后注册函数会覆盖前面的注册函数

addEventListener 事件监听方式(兼容性问题)

eventTarget.addEventListener(type, listener[,useCapture])

btn.addEventListener('click',function(){})

同一元素同一事件可以添加多个侦听器

attachEvent 事件监听(非标准 仅ie9前版本支持)

eventTarget.attachEvent(eventNameWithOn, callback);

btn.onclick = null;

addEventListener 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.detachEvent(eventNameWithOn, callback)

捕获阶段 执行阶段 冒泡阶段

捕获阶段 document->html->body->div

冒泡 document<-html<-body<-div

(执行顺序)

JS代码只能执行捕获或冒泡其中的一个阶段

onclick attachEvent 只能得到冒泡阶段

addEventListener('click',fn,true)//第三个参数是 true 则处于捕获阶段 document->html->body->div

//第三个参数是 false(默认) 则处于冒泡阶段

event 事件对象 （作为形参）(可自命名)

事件对象只有有了事件才会存在 系统自动创建

事件对象是事件的一系列相关数据的集合(鼠标信息 坐标 键盘信息...)

div.onclick = function(event) {}

属性方法

e.target 返回的是触发事件的对象

this 返回的是绑定事件的对象(currentTarget//兼容性)

e.type

阻止默认行为

e.preventDefault()阻止默认行为 让链接不跳转 或者让提交按钮不提交 (兼容性)

普通浏览器

e.preventDefault()

e.returnValue //ie

return false//没有兼容性问题 return 后代码不执行

阻止冒泡

e.stopPropagation

兼容性

e.cancleBubble = true;

事件委托

不给每个子节点单独设置事件监听器，而是给父节点添加事件监听器，利用冒泡原理影响设置每个子节点

ul注册点击事件，利用target找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

只操作一次DOM，提高程序的性能

禁止选中文字 禁止右键菜单

鼠标坐标

e.clientX e.clientY

浏览器可视区域

e.pageX e.pageY (ie9+)

文档页面

e.screenX e.screenY

电脑屏幕

鼠标事件

mousemove//鼠标移动事件

键盘事件

keyup

keydown

keypress//不能识别功能键

load 事件

a标签的超链接

F5刷新

前进后退时

pageshow事件

firefox中的往返缓存不触发load

重载页面（页面可以来自缓存）触发

阻止链接跳转 添加javascript:void(0);或javascript:;

.join("") 字符数组元素合并//.join(",")...

inputelement.focus()//使输入框获得焦点//onfocus 事件

blur失去焦点

本文来自博客园，作者：w0000，转载请注明原文链接：https://www.cnblogs.com/w0000/p/15335002.html