JUDGMENT
Get page elements
document.getElementById('id'); // id 选择器
document.getElementsByTagName('div'); // 标签选择器 返回伪数组
// html新增
document.getElementsByClassName('box'); // 类名学则器
document.querySelector('#id')； // 返回指定选择器的第一个元素对象，里面写css选择器
document.querySelectorAll('.class'); // 返回所有
document.body; // 获取body元素
document.documentElement; // 获取 html 元素
Event infrastructure
Event consists of three parts the event source type of event handler
objects event is triggered: Event Sourcevar btn = document.getElementById('btn');Event Type: What are the triggers for event (onclick)
Event handler: completed by way of a function assignment
btn.onclick = function () { alert('hello'); }
Common mouse events
| Mouse Events | Triggering conditions |
|---|---|
onclick |
Left mouse click trigger |
onmouseover |
Rollover Trigger |
onmouseout |
Mouse leaves the trigger |
onfocus |
Get the mouse focus trigger |
onblur |
Trigger loses focus |
onmousemove |
Mouse to move the trigger |
onmouseup |
Mouse up trigger |
onmousedown |
Mouse press the trigger |
Change element content
element.innerText // 从起始位置到终止位置的内容，会去除html标签，同时空格和换行也会去掉
element.innerHTML // 从其实位置到终止位置的全部内容，包括html标签，同时保留空格和换行
Modify element properties
// 常用的元素属性 src title src href ...
var img = document.querySelector('img');
// 标签.属性的赋值
img.src = './img.png';
// 表单元素修改也是同理，但是需要注意没有属性值的用true 和false表示
input.placeholder = 'world';
input.disabled = true;
Modify elements style properties
// 修改后为样式为行内样式
element.style.backgroundColor = 'red';
// 提前事先定义样式，通过类名修改样式, 会覆盖之前的类名
element.className = 'change';
Select whether the tag case
var j_cbAll = document.querySelector('.j_cbAll');
var j_tbs = document.getElementsByClassName('j_tbs');
// 子级状态跟随父级改变
j_cbAll.onclick = function () {
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = j_caAll.checked;
}
}
// 只要有一个子级没有选中，父级也不会选中
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
var flag = true;
for (var i = 0; i < j_tbs.length; i++) {
// 取反，整个循环结束后就不会还有 false的取反 所以不走if直接走下面了
if (!j_tbs[i].checked) {
flag = false;
break;
}
j_cbAll.checked = flag;
}
}
}
Custom Attributes operation
Gets the element property values
// 1. element.属性 （获取元素自身属性）
// 2. // getAttribute 获取自定义属性
element.getAttribute('index');
Set property values
// 1. div.id = 'text';
// 2. setAttribute(); 针对自定义属性
element.setAttribute('index', 2); // 设置index属性值为2
Delete attribute values
element.removeAttribute('index') // 移除 index 属性值
Custom attribute specification HTML5 Define Custom Attributes To begin with data- name as a property and assignment example:<div data-inde="1"></div>
Node operation
Using the DOM tree node can be divided into different levels, it is common father and his sons level
The parent node
node.parentNode; // 返回元素最近的一个父节点，如果没有返回null
Child nodes
node.childNodes; // 元素下所有子节点包含文本节点
node.children; // 元素下所有子元素 第一层级 **
// 以下包含文文本节点
node.firstChild; // 获取第一个子节点
node.lastChild; // 获取最后一个子节点
// 以下有兼容性 IE9+
node.firstElementChild; // 获取第一个子元素节点
node.lastElementChild; // 获取最后一个子元素节点
Sibling
// 含文本节点
console.log(span.previousSibling); // 获取上一个兄弟节点
console.log(div.nextSibling); // 获取下一个兄弟节点
// 存在兼容性 IE9+
console.log(div.nextElementSibling);
console.log(span.previousElementSibling);
Add Nodes
// 添加节点需要先创建再添加
var li = document.createElement('li');
ul.appendChild(li); // ul 尾部添加 li 元素
ul.insertBefore(li); // ul 头部添加 li 元素
Delete Node
ul.removeChild(ul.children[0]); // 删除 ul 中的第一个子元素
Copy nodes
ul.children[0].cloneNode(); // 赋值ul中第一个子元素节点 括号内为不写或false 就是只赋值标签不复制内容
ul.children[0].cloneNode(true); // 深拷贝。赋值元素内所有内容
Three ways to create between items
document.write();: Create elements, if the flow of the document is finished call this code again, it will happen to redraw the page
innerHTML: Create elements, because it is the string concatenation performance will be slower if you are using an array splicing, more efficient, slightly more complicated structure
document.createElement();: Create multiple element array splicing efficiency slower than some much faster than string concatenation, but some clearer structure