DOM 操作

一、增

// 创建节点
var li = document.createElement('li');

// 添加节点
ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);

二、删

ul.removeChild(li);

三、改

• 修改元素内容 innerHTML innerText (可读可写)

var text = li.innerHTML;

li.innerHTML = '<strong>小丽</strong>';
li.innerText = '小丽';

• 修改元素属性

var src = img.src;
img.src = './test.png';

input.value = '输入框内容';

input.checked = true;
input.disabled = true;

• 修改元素样式

div.style.display = "none";
div.style.backgroundPosition = '';

div.className = 'base change';

四、查

元素查找

• getElementById

document.getElementById('id名');  // 返回的是一个元素对象

• getElementsByTagName

document.getElementsByTagName('标签名');  // 返回的是伪数组 [li，li]

• getElementsByClassName

document.getElementsByClassName('类名');  // 返回的是伪数组 [li]

• querySelector

document.querySelector('#选择器');  // 返回的是第一个元素对象

• querySelectorAll

document.querySelectorAll('.选择器');  // 返回的是伪数组 []

节点查找

• 父节点

var $ul = li.parentNode;  // parentNode是个属性 不加（）

• 子节点

var li = ul.children;

// 第一个子节点
var firsrLi = ul.children[0];

// 最后一个子节点
var lastLi = ul.children[ul.children.length - 1];

• 兄弟节点

var li = li.nextElementSibiling; (下一个)

var li = li.previousElementSibiling;（上一个）

• 删除节点

ul.removeChild(li);

• 克隆节点

var li = li.cloneNode(true);

ul.appendChild(li);

五、自定义属性

• 设置属性

li.setAttribute('data-index',100);

• 获取属性

li.getAttribute('data-index');  // 100

li.dataset.index
li.dataset['index']

• 删除属性

li.removeAttribute('data-index'); 

六、事件

• 注册事件

li.onclick = function(){
	// do something
	li.onclick = null; // 清除事件
}

li.addEventListener('click',function(){
	// do something
}, true)

li.addEventListener('click',fn, true)

function fn(){
	// do something
}

li.removeEventListener('click', fn)	// 清除事件监听

• 事件类型

​ 点击： onclick

​ 获取焦点：onfocus

​ 失去焦点: onblur

​ 鼠标按下：onmousedown

​ 鼠标移动：onmousemove

​ 鼠标弹起：onmouseup

​ 鼠标移入：onmouseover（可以冒泡） || onmouseenter

​ 鼠标移出：onmouseout || onmouseleave

​ 键盘按下：onkeydown onkeypress

​ 键盘弹起：onkeyup

​ 滚动事件：onscroll

• 事件对象

​ e.target：触发事件的元素

​ e.preventDefault：阻止默认行为

​ e.stopPropagation：阻止事件冒泡

​ e.pageX：点击事件中鼠标坐标

​ e.keyCode：键盘事件中按键对应的ASCII码

​ e.targetTouches：触摸目标元素的手指列表 []

​ e.touches：触摸屏幕的手指列表 []