js-DOM基础知识一-CSDN博客

本文链接：https://blog.csdn.net/smilejuan/article/details/21274167

DOM简介：即是文档模型:

1. 是 XML 文档的编程接口

定义如何在程序中访问和操作 XML文档
是与平台和语言无关的接口
以树结构表示 XML 文档
通过提供一组对象对 XML 文档结构的访问
定义用于访问和操作 XML 文档的 API

节点类型：

1. 元素节点：element node ,各种标签是元素节点的名称

文本节点：text node包含在元素节点的文本
属性节点：被包含在元素节点内

Js操作DOM

1. 访问节点

（1） getElementsByTagName():返回一个包含相同签名的NodeList

var oLi = document.getElementsByTagName("li");

案例：

<span style="font-family:Calibri;font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
      function searchDOM(){
       /* 根据标签名查nodelist */
       var lis=document.getElementsByTagName("li");
       alert(lis);</span><pre class="java" name="code">   /* 取子元素的值 */
   alert(lis[1].childNodes[0].nodeValue);
}
 </script>
  
  </head>
  
  <body οnlοad="searchDOM()">
	<ul>
		客户端语言
		<li>HTML</li>
		<li>JavaScript</li>
		<li id="cssLi">CSS</li>
	</ul>
	<ul>
		服务器端语言
		<li>ASP.NET</li>
		<li>JSP</li>
		<li>PHP</li>
	</ul>
  </body>
</html>

根据标签名查nodelist的图示：

取子元素的值图示：

查找ul的长度

  //2查ul
       var uls=document.getElementsByTagName("ul");
       alert(uls.length);

查找第二个元素的第二个子元素的子节点

  var lius=uls[1].getElementsByTagName("li");
    alert(lius[1].childNodes[0].nodeValue);

（2） getElementsById():返回id为指定值的元素

var oLi = document.getElementById("cssLi");

document.nodeType：元素节点为1,属性节点为2，文本节点为3,document为9