HTML DOM ——常用知识点小结

最新推荐文章于 2022-06-29 19:30:01 发布

iteye_20659

最新推荐文章于 2022-06-29 19:30:01 发布

阅读量161

点赞数

文章标签： javascript ViewUI

　一、ＤＯＭ对象：

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

　　通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
　　JavaScript 能够改变页面中的所有 HTML 元素
　　JavaScript 能够改变页面中的所有 HTML 属性
　　JavaScript 能够改变页面中的所有 CSS 样式
　　JavaScript 能够对页面中的所有事件做出反应

　　而对HTML的修改，很多要通过DOM对象的操作来实现的

二、常用操作：

　查找节点：

　　１、getElementById(elementId)

　　　//寻找一个有着给定id属性值的元素，返回一个元素节点

　　２、getElementsByTagName(tagName)

　　　//用于寻找有着给定标签名的所有元素

　　３、getElementsByName(elementName)

　　　//在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可

　综合实例：

		<html>
		<body>
		
		<p id="intro" >这是ID选择器的实例</p>
		<div id="main">
		<p>这是标签选择器的实例</p>
		</div>
		
		<script>
			//使用ID选择器
			x=document.getElementById("intro");
			document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
			
			//使用标签选择器
			var x=document.getElementById("main");
			var y=x.getElementsByTagName("p");
			document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
		</script>
		
		</body>
		</html>

　创建节点

　　１、document.createElement(element)

　　　//参数为要新添的节点标签名

　　２、document.createTextNode(string)
　　　//创建一个包含着给定文本的新文本节点

　综合实例：

	　　　<!DOCTYPE html>
		<html>
		<body>
			<script>		
				//创建一个节点
				node=document.createElement("z")			
				//带文本的节点
				textnode=document.createTextNode("hello");
		
			</script>
		</body>
		</html>

　添加节点:

　　１、//添加子节点：

　　　node.appendChild(newChild) //newChild为生新增的节点

　　２、//插入节点

　　　node.insertBefore(newNode,targetNode)；

　　　node.insertAfter(newNode,targetNode);

　综合实例：

		<html>
		<body>
		<script>
		var i_nowline=1;var i_nowwidth=320;var i_nowheight=200;
		function rdl_fnAppend(){
		var oNewNode=document.createElement("li");
		oList.appendChild(oNewNode);
		i_nowline=i_nowline+1;i_nowheight+=15;
		oNewNode.innerText="第"+i_nowline.toString()+"个列表项目";
		window.resizeTo(i_nowwidth,i_nowheight);
		}
		</script>
		
		
		<ul id=oList>
		<li>第1个列表项目
		</ul>
		<input type=button value=" 添加 " οnclick="rdl_fnAppend()">
		
		</body>
		</html>

　删除节点：

　　１、//删除节点node.removeChild(node)

　　２、//IE支持，但FF不支持,node.removeNode()推荐用removeChild代替实现

　综合实例：

		<script>
		var i_nowwidth=320;var i_nowheight=240;
		function rdl_doRemove(){
		with (document.all("oParent")) {
		if (children.length<1) return;
		removeChild(children[0]);
		}
		i_nowheight=i_nowheight-15;
		window.resizeTo(i_nowwidth,i_nowheight);
		}
		</script>
		
		
		<div id=oParent>
		<div>第1个子对象</div>
		<div>第2个子对象</div>
		<div><a href="#" οnclick="return false;">第3个子对象</a></div>
		<div>第4个子对象</div>
		</div>
		<br><input type=button value=" 删除第一个子对象 " οnclick="rdl_doRemove()">

三、常用节点属性：

　　1、.nodeName//只读，返回节点名称，相当于tagName.

　　2、.nodeValue//可读可写，但对元素节点不能写。返回一个字符串，指示这个节点的值。元素节点返回null，

属性节点返回属性值，文本节点返回文本。一般只用于设置文本节点的值。

　　3、.nodeType//只读，返回节点类型：1，元素节点；2，属性节点；3，文本节点。　

　　4、node.contains() //是否包含某节点，返回boolean值,IE支持，FF不支持contains()，但支持W3C标准

　　5、node.hasChildNodes()//是否有子节点，返回boolean值　

　综合实例：　　

		<html>
		<body>
		
		<p id="intro">Hello World!</p>
		
		<script>
		var txt1=document.getElementById("intro").nodeName;// nodename例子
		document.write(txt1);
		
		var txt2=document.getElementById("intro").nodevalue;//nodevalue 例子
		document.write(txt2);
		
		var txt3=document.getElementById("intro").nodetype;//nodetype 例子
		document.write(txt3);
		
		var txt4=document.getElementById("intro").contains();contains()例子
		document.write(txt4);
		
		var txt5=document.getElementById("intro").hasChildNodes();hasChildNodes例子
		document.write(txt5);		
		
		
		</script>
		
		</body>
		</html>

四、ＤＯＭ小结

　　DOM 定义了访问和操作 HTML 文档的标准方法。而各个浏览器因为其内核的不同，因而对DOM元素解析也不尽相同，因此具体的应用，还需要在具体的实践中积累，文章所列举的一些DOM方法或是属性，都是一些最常用的，至于更全面的，更详细的，送个福利吧（点击下载DOM手册）

iteye_20659

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM ——常用知识点小结

　一、ＤＯＭ对象：　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。　　通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。　　JavaScript 能够改变页面中的所有 HTML 元素　　JavaScript 能够改变页面中的所有 HTML 属性　　Java...
复制链接

扫一扫