アウトライン
ドキュメントオブジェクトモデル（ドキュメントオブジェクトモデル、DOM）は、HTMLやXML文書のためのプログラミング・インタフェースです。これは、文書が構造化された表現を提供し、文書やプレゼンテーションの内容を変更することができます提供します。
検索要素
図1は、ラベルを見つける
個々の要素のdocument.getElementById（「I1」）を得る
要素（リスト）の複数を得るdocument.getElementsByTagName（「DIV」）
の要素（リスト）の複数を得るdocument.getElementsByClassName（「C1」）
への直接A.を
ドキュメント.getElementById IDに従ってラベル取得
document.getElementsByNameタグのセット取得name属性
クラスの属性に応じてタグのセットを取得document.getElementsByClassName
document.getElementsByTagNameは、タグ名に応じてタグのセットを取得し
、Bを間接のGet
タグ=のdocument.getElementById（「I1」）を
parentElement / /ラベルの親要素の
子供//すべてのサブタグ
firstElementChild //最初の子タグ要素
lastElementChild //最後の子要素タグ
nextElementtSibling //次の兄弟要素タグの
兄弟要素にpreviousElementSibling //ラベル
parentNode
/
/
父节点
childNodes
/
/
所有子节点
firstChild
/
/
第一个子节点
lastChild
/
/
最后一个子节点
nextSibling
/
/
下一个兄弟节点
previousSibling
/
/
上一个兄弟节点
ラベルの取り扱い
。のinnerTextは、
テキストラベルを取得し
たタグ.innerText
ラベルテキストは、内部再コピー
「」ラベル= .innerTextを
B. classNameの
tag.classNameは=「全体の動作を行う直接
指定した追加tag.classList.add（ 『スタイル名』）スタイル
指定されたスタイルを削除するtag.classList.remove（「スタイル名」）
C。チェックボックス
値取得
チェックボックスは.checkedをオブジェクト
設定値の
チェックボックスは=真.checkedをオブジェクト
その他の操作
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href =
"url"
重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
イベント登録
イベント：たとえば、あなたは、クリックしてください何が起こったのか、時間をダブルクリックしたときに何が起こるか、「ボタン」は、そこにあるが、これは、イベントと呼ばれています！
登録：上記のイベントの発生が結合したすべてのイベントと関数の最初、彼は我々が望んでいたものを見えるようにして、彼らは指定されたラベルにサインアップするときに、アクションをクリックして、すべてのボタンの最初に、。
イベントポイントは注意することが場合：
- この
- イベント
- そして、一連のイベントのうち
このラベルのラベルが現在動作して、イベントが現在のイベントの内容をカプセル化します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige_js_file</title> <!--导入javascript脚本方法--> <!--<script type="text/javascript" src="t1.js "></script>--> <style> .color_red { background-color: red; } </style> </head> <body> <div id="id_1"> </div> <!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中--> <input type="button" onclick="edit();" value="修改"/> <input type="button" onclick="rollback();" value="回滚"/> <script type="text/javascript"> function edit() { var i = document.getElementById('id_1'); i.className = 'color_red'; } function rollback() { var i = document.getElementById('id_1'); i.className = ''; //这里只要给他设置为空即可 } </script> </body> </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="CheckAll();"/> 9 <input type="button" value="取消" onclick="CancelAll();"/> 10 <input type="button" value="反选" onclick="ReverseCheck();"/> 11 12 <table border="1"> 13 <thead> 14 15 </thead> 16 <tbody id="tb"> 17 <tr> 18 <td><input type="checkbox"/></td> 19 <td>111</td> 20 <td>222</td> 21 </tr> 22 <tr> 23 <td><input type="checkbox"/></td> 24 <td>111</td> 25 <td>222</td> 26 </tr> 27 <tr> 28 <td><input type="checkbox"/></td> 29 <td>111</td> 30 <td>222</td> 31 </tr> 32 <tr> 33 <td><input type="checkbox"/></td> 34 <td>111</td> 35 <td>222</td> 36 </tr> 37 </tbody> 38 </table> 39 <script> 40 function CheckAll(ths) { 41 var tb = document.getElementById('tb'); 42 var trs = tb.childNodes; 43 for (var i = 0; i < trs.length; i++) { 44 45 var current_tr = trs[i]; 46 if (current_tr.nodeType == 1) { 47 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; 48 inp.checked = true; 49 } 50 } 51 } 52 53 function CancelAll(ths) { 54 var tb = document.getElementById('tb'); 55 var trs = tb.childNodes; 56 for (var i = 0; i < trs.length; i++) { 57 58 var current_tr = trs[i]; 59 if (current_tr.nodeType == 1) { 60 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; 61 inp.checked = false; 62 } 63 } 64 } 65 66 function ReverseCheck(ths) { 67 var tb = document.getElementById('tb'); 68 var trs = tb.childNodes; 69 for (var i = 0; i < trs.length; i++) { 70 var current_tr = trs[i]; 71 if (current_tr.nodeType == 1) { 72 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; 73 if (inp.checked) { 74 inp.checked = false; 75 } else { 76 inp.checked = true; 77 } 78 } 79 } 80 } 81 82 </script> 83 </body> 84 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8'/> 5 <title></title> 6 7 <style> 8 .gray { 9 color: gray; 10 } 11 12 .black { 13 color: black; 14 } 15 </style> 16 </head> 17 <body> 18 <!--input标签内注注册了两个事件(onfocus/onblur并且事件已经绑定了函数)--> 19 <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/> 20 <script type="text/javascript"> 21 function Enter() { //函数Enter的作用,当元素获得焦点就把里面的值设置为空并把颜色设置为黑色 22 var id = document.getElementById("tip"); //找到id为tip的标签并赋值给id 23 id.className = 'black'; //给id的class设置为black 24 if (id.value == '请输入关键字' || id.value.trim() == '') { 25 id.value = '' 26 } //判断找到的标签的value='请输入关键里'或者你输入的内容为空 27 } 28 29 function Leave() { //函数Leave的作用,当元素失去焦点就把里面的值设置为"请输入关键字"并把颜色设置为灰色 30 var id = document.getElementById("tip"); //找到id为tip的标签病赋值为id 31 var val = id.value; //把id的value属性赋值为val 32 if (val.length == 0 || id.value.trim() == '') { 33 id.value = '请输入关键字'; 34 id.className = 'gray'; 35 } else { 36 id.className = 'black'; 37 } //判断如果val的长度为0,或者用户输入为空字符,把id的value设置为"请输入关键字" 38 //否则把id.class设置为black 39 } 40 </script> 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>欢迎大佬莅临指导 </title> 6 <!--跑马灯实例--> 7 <script type="text/javascript"> 8 function run() { //定义一个函数 9 var content = document.title; //获取title的内容 10 var firstChar = content.charAt(0); //获取content第一个元素 11 var sub = content.substring(1, content.length); //获取content字符串剩余的元素 12 document.title = sub + firstChar; //对字符串进行新的拼接 13 } 14 15 setInterval('run()', 1000); //使用interval每秒执行然后达到跑马灯的目的 16 </script> 17 </head> 18 <body> 19 20 21 </body> 22 </html>
参考：
http://www.cnblogs.com/alex3714
http://www.cnblogs.com/wupeiqi
internet＆python books
PS:如侵权，联我删。