22网页前端javascript——DOM、

一：DOM

1：DOM的介绍：文档对象模型，针对html和xml文档的API应用程序接口。dom秒回了一个层次化的节点树，运行开发人员添加、移除、修改页面的某一部分。

 

2：查找元素：

w3c 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：

方法	说明
getElementById（）	获取特定ID元素的节点
getElementByTagName（）	获取相同元素的节点列表
getElementByName（）	获取相同名称的节点列表
getAttribute（）	获取特定元素节点属性的值
setAttribute（）	设置特定元素节点属性的值
removeAttribute（）	移除特定元素节点属性

 

问题1：获取不到id：

解决1：script 放到下面：

	dom

解决2：采用延时加载：

	dom

具体操作：

	dom


	
1
	
2

 

3：节点操作：

A。    元素节点属性

属性	说明
tagName	获取元素节点的标签名
innerHTML	获取元素节点里的内容，非w3c DOM规范

B。        HTML属性的属性

属性	说明
id	元素节点的id名称
title	元素节点的title属性值
style	css内联样式属性值
className	css元素的类

 C。         DOM不单单可以查找节点，也可以创建节点，复制节点，插入节点，删除节点，替换节点

方法	说明
write()	这个方法可以把任意字符串插入到文档中
creatElement（）	创建一个元素节点
appendChild（）	将新节点追加到子节点列表的末尾
creatTextNode（）	创建一个文件节点
insertBefore（）	将新节点插入在前面
cloneNode（）	复制节点
removeChild（）	移除节点
replaceChild（）	将新节点替换旧节点

	window.onload=function(){
		//---------------------------元素节点属性------------------------
		var ad=document.getElementById("ad").tagName;//获取id为“ad”的标签名
		var ad=document.getElementById("ad").innerHTML;//获取id为“ad”的具体内容
		alert(ad);
		//---------------------------HTML的属性--------------------------
		var ae=document.getElementById("ad").title='biao';//设置id为ad的 title标题
		var ae=document.getElementById("ad").style.color='red';
		alert(ae);
		//-------------------------------创建节点--------------------------
		document.write('hello,my name is zhangsan');
		var p =document.createElement('p');
		var box =document.getElementById('ad');
		box.appendChild(p);

	}