1.什么是 DOM

通过 ，您可以重构整个HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西， 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型（DOM）来获得的。
DOM 可被 用来读取、改变 HTML、XHTML 以及 文档。也就是说DOM可以帮助 更好的和页面进行交互。

DOM:Document Model(文本对象模型)

D：文档 – html 文档 或 文档

O：对象 – document 对象的属性和方法

M：模型 DOM 是针对 (html)的基于树的API。

DOM树:节点（node）的层次。 DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

DOM定义了Node的接口以及许多种节点类型来表示 节点的多个方面

DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释结点 等等

\"\"

2.在HTML文档的什么位置编写 JS 代码

0). 直接在 html 页面中书写代码.
      

 <button id=\"button\"  =\"alert(\'hello world\');\">Click Me!</button>


        缺点: 
            ①. js 和 html 强耦合, 不利用代码的维护
            ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 属性中完成对函数的引用, 比较麻烦

    1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成, 
        获取不到指定的节点:

<head>
        <  http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
        < >Un d Document</ >
        <  type=\"text/ \">
            var cityNode = document.getElementById(\"city\");
            //打印结果为 null.
            alert(cityNode);
        </ >
    </head>
    <body>


    2). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯
    
    3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window. 事件,　
        该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.

 <head>
            <  http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
            < >Un d Document</ >
            <  type=\"text/ \">
                window.  = function(){
                    var cityNode = document.getElementById(\"city\");
                    alert(cityNode);
                };
            </ >
        </head>
        <body>

3.获取元素节点

1). **document.getElementById: 根据 id 属性获取对应的单个节点

2). **document.getElementsByTagName: 
    根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

3). document.getElementsByName: 
    根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以. 

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<html>
	<head>
		<  http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
		< >Un d Document</ >
		
		<  type=\"text/ \">
			
			//获取指定的元素节点. 
			window.  = function(){
				
				//1. 获取 id 为 bj 的那个节点.
				//在编写 HTML 文档时, 需确保 id 属性值是唯一的. 
				//该方法为 document 对象的方法
				var bjNode = document.getElementById(\"bj\");
				alert(bjNode);
				
				//2. 获取所有的 li 节点. 
				//使用标签名获取指定节点的集合. 
				//该方法为 Node 接口的方法, 即任何一个节点都有这个方法. 
				var liNodes = document.getElementsByTagName(\"li\");
				alert(liNodes.length);
				
				var cityNode = document.getElementById(\"city\");
				var cityLiNodes = cityNode.getElementsByTagName(\"li\");
				alert(cityLiNodes.length);
				
				//3. 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合. 
				var genderNodes = document.getElementsByName(\"gender\");
				alert(genderNodes.length);
				
				//若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()
				//方法对于 IE 无效. 所以使用该方法时需谨慎. 
				var bjNode2 = document.getElementsByName(\"BeiJing\");
				alert(bjNode2.length);
				
			}
			
		</ >
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id=\"city\">
			<li id=\"bj\" name=\"BeiJing\">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id=\"game\">
			<li id=\"rl\">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type=\"radio\" name=\"gender\" value=\"male\"/>Male
			<input type=\"radio\" name=\"gender\" value=\"female\"/>Female
	</body>
</html>

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章