1.33 JavaScript之HTML的DOM（三）
一、DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM把所有的html都转换为节点 、整个文档 是一个节点 、元素 是节点
元素属性 是节点 、元素内容 是节点 、注释 也是节点
<html> <body> <div id="d1">hello HTML DOM</div> </body> <script> function p(s){ document.write(s); document.write("<br>"); } //通过document.getElementById获取了id=d1的div标签对应的元素节点 var div1 = document.getElementById("d1"); p("文档节点"+document); p("元素"+div1); //然后通过attributes 获取了该节点对应的属性节点 p("属性节点"+div1.attributes[0]); //通过childNodes获取了内容节点 p("内容节点"+div1.childNodes[0]); </script> </html>
二、获取节点
在设计html的时候，一个元素对应的id应该是唯一的。
1.可以通过document.getElementById 获取某个元素对应的元素节点对象
2.所有的元素都有标签名 、通过 getElementsByTagName 根据标签名称获取一个元素数组。
<html> <div id = "d1">hello HTML DOM</div> <div >hello BOM</div> <div >hello DOM</div> <script> //1.document.getElementById 获取某个元素对应的元素节点对象 var div1 = document.getElementById("d1"); document.write(div1); document.write("<br>"); //2. getElementsByTagName 根据标签名称获取一个元素数组。 var divs = document.getElementsByTagName("div"); for(i=0;i<divs.length;i++){ document.write(divs[i]); document.write("<br>"); } </script> </html>
3、通过类名获取元素节点，与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组
<html> <h1 class="d" >hello javascript</h1> <h2 class="d" >hello BOM</h2> <div class="d" >hello DOM</div> <br> <script> var elements= document.getElementsByClassName("d"); for(i=0;i<elements.length;i++){ document.write(elements[i]); document.write("<br>"); } </script> </html>
4、表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。
<html> 用户名 <input name="userName"> <br> 密码 <input name="userPassword"> <br> <script> var elements= document.getElementsByName("userName"); for(i=0;i<elements.length;i++){ document.write(elements[i]); document.write("<br>"); } </script> </html>
这是因为javascript是解释语言，是顺序执行的。 在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取。
5、获取节点的属性
nodeName 节点名称
1、document.nodeName 文档的节点名，是 固定的#document
2、div1.nodeName 元素的节点名，是对应的标签名 div
3、div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
4、div1.childNodes[0].nodeName 内容的节点名，是固定的 #text
nodeValue 节点值
1、document.nodeValue 文档的节点值，是 null
2、div1.nodeValue 元素的节点值，是null
3、div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
4、div1.childNodes[0].nodeValue 内容的节点值，是内容 即： #text
nodeType 节点类型（元素1，属性2，文本3，注释8，文档9）
1、document.nodeType 文档的节点类型，是 9
2、div1.nodeType 元素的节点类型，是 1
3、div1.attributes[0].nodeType 属性的节点类型，是 2
4、div1.childNodes[0].nodeType 内容的节点类型，是 3
innerHTML 元素的文本内容 id、value
1、修改与获取内容的值可以通过 childNodes[0].nodeValue进行 、还有个简便办法就是通过innerHTML进行。 效果是一样的。
className 元素上的属性input1.className
三、HTML DOM常用事件
3.1 焦点事件
当组件获取焦点的时候，会触发onfocus事件
当组件失去焦点的时候，会触发onblur事件
<input type="text" onfocus="f()" id="input1" placeHolder="输入框1" > <br> <br> <input type="text" id="input2" onblur="b()"placeHolder="输入框2"> <br> <br> <div id="message"></div> <script> function f(){ document.getElementById("message").innerHTML="输入框1获取了焦点"; } function b(){ document.getElementById("message").innerHTML="输入框2丢失了焦点"; } </script>
3.2 点击事件
点击事件，由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件
当在组件上双击的时候，会触发ondblclick事件
注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
注2: 自定义函数不要使用click()，这是保留函数名。
<input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" > <br> <br> <div id="message"></div> <script> function singleClick(){ document.getElementById("message").innerHTML="单击按钮"; } function doubleClick(){ document.getElementById("message").innerHTML="双击按钮"; } </script>
3.3 提交事件
<form action="/study/login.jsp" onsubmit="login()"> 账号：<input type="text" name="name"> <br/> 密码：<input type="password" name="password" > <br/> <input type="submit" value="登录"> </form> <script> function login(){ alert("提交表单"); } </script> 双击选中所有代码 试一下