JUDGMENT
ページ要素を取得します。
document.getElementById('id'); // id 选择器
document.getElementsByTagName('div'); // 标签选择器 返回伪数组
// html新增
document.getElementsByClassName('box'); // 类名学则器
document.querySelector('#id')； // 返回指定选择器的第一个元素对象，里面写css选择器
document.querySelectorAll('.class'); // 返回所有
document.body; // 获取body元素
document.documentElement; // 获取 html 元素
イベント・インフラストラクチャー
イベントは3つの部分から構成され、イベントハンドラのイベントソースの種類
オブジェクトのイベントがトリガされます：イベントソースvar btn = document.getElementById('btn');イベントの種類：イベントのトリガーは何（のonclick）
イベントハンドラ：機能割り当ての方法によって完成
btn.onclick = function () { alert('hello'); }
一般的なマウスイベント
| マウスイベント | トリガ条件 |
|---|---|
onclick |
マウスの左クリックのトリガー |
onmouseover |
ロールオーバートリガー |
onmouseout |
マウスは、トリガーを残し |
onfocus |
マウスフォーカストリガーを取得 |
onblur |
トリガーは、フォーカスを失いました |
onmousemove |
マウスは、トリガーを移動します |
onmouseup |
トリガーアップマウス |
onmousedown |
マウスは、トリガーを押してください |
Change要素の内容
element.innerText // 从起始位置到终止位置的内容，会去除html标签，同时空格和换行也会去掉
element.innerHTML // 从其实位置到终止位置的全部内容，包括html标签，同时保留空格和换行
修正要素のプロパティ
// 常用的元素属性 src title src href ...
var img = document.querySelector('img');
// 标签.属性的赋值
img.src = './img.png';
// 表单元素修改也是同理，但是需要注意没有属性值的用true 和false表示
input.placeholder = 'world';
input.disabled = true;
修正要素のスタイルプロパティ
// 修改后为样式为行内样式
element.style.backgroundColor = 'red';
// 提前事先定义样式，通过类名修改样式, 会覆盖之前的类名
element.className = 'change';
タグケースかどうかを選択します
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;
}
}
}
カスタム操作属性
要素のプロパティ値を取得します。
// 1. element.属性 （获取元素自身属性）
// 2. // getAttribute 获取自定义属性
element.getAttribute('index');
設定されたプロパティ値
// 1. div.id = 'text';
// 2. setAttribute(); 针对自定义属性
element.setAttribute('index', 2); // 设置index属性值为2
削除の属性値
element.removeAttribute('index') // 移除 index 属性值
カスタム属性指定 HTML5は、カスタムプロパティと割り当ての例として、データ名で開始するには属性を定義します。<div data-inde="1"></div>
ノードの操作
DOMツリーのノードを使用して、さまざまなレベルに分けることができ、それは一般的な父親とその息子たちのレベルであります
親ノード
node.parentNode; // 返回元素最近的一个父节点，如果没有返回null
子ノード
node.childNodes; // 元素下所有子节点包含文本节点
node.children; // 元素下所有子元素 第一层级 **
// 以下包含文文本节点
node.firstChild; // 获取第一个子节点
node.lastChild; // 获取最后一个子节点
// 以下有兼容性 IE9+
node.firstElementChild; // 获取第一个子元素节点
node.lastElementChild; // 获取最后一个子元素节点
兄弟
// 含文本节点
console.log(span.previousSibling); // 获取上一个兄弟节点
console.log(div.nextSibling); // 获取下一个兄弟节点
// 存在兼容性 IE9+
console.log(div.nextElementSibling);
console.log(span.previousElementSibling);
ノードの追加
// 添加节点需要先创建再添加
var li = document.createElement('li');
ul.appendChild(li); // ul 尾部添加 li 元素
ul.insertBefore(li); // ul 头部添加 li 元素
[ノードの削除
ul.removeChild(ul.children[0]); // 删除 ul 中的第一个子元素
コピーノード
ul.children[0].cloneNode(); // 赋值ul中第一个子元素节点 括号内为不写或false 就是只赋值标签不复制内容
ul.children[0].cloneNode(true); // 深拷贝。赋值元素内所有内容
アイテム間を作成するには、3つの方法
document.write();：要素を作成し、文書の流れは再びこのコードの完成コールであれば、ページを再描画するために起こります
innerHTML：それはあなたが、より効率的に、もう少し複雑な構造を配列スプライシングを使用している場合、文字列連結のパフォーマンスが遅くなりますですので、要素を作成します。
document.createElement();：より高速な文字列の連結よりも遅く、いくつかの非常に比べて、複数の素子アレイスプライシング効率を作成しますが、いくつかの明確な構造