8.5 HTML和JavaScript的DOM

Posted 2022-11-12 smileing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了8.5 HTML和JavaScript的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>
双击选中所有代码
试一下

以上是关于8.5 HTML和JavaScript的DOM的主要内容，如果未能解决你的问题，请参考以下文章

8.5 JavaScript的BOM

Quartz1.8.5例子