1.Dom是文档对象模型。是一种属性结构的。在java中一切元素都是对象,html中一切元素的都是节点。
2.<a href=”aaa.html”>sds</a>
A是元素节点,href是属性节点,sds是文本节点
3.getElementByid是查找元素节点
4.getElementsByName也是查找元素节点的。
5. getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
6.hasChildNodes查看是否存在子节点。
7.用nodename返回的是每种节点的名称。但是如果是文本节点在返回一个#text
8.取文本节点的方法就是先取元素节点,然后用子节点取。
9,取属性节点,先取元素节点,然后用getAttributeNode(“属性名”)取
10.Nodetype如果是元素节点返回1,属性节点是2,文本节点3
11.nodevalue如果是元素节点返回为空,属性节点返回属性的内容,文本节点也返回内容
12.setattribute(“属性名”,“属性名字”)对节点添加属性
13.createElement()创建元素节点
14.createTextNode()创建文本节点
例子说明
<script type="text/javascript" language="javascript">
var add = new Function('a', 'b', 'return a+b;');//这是函数定义的方法,构造方法定义
alert(add(4, 4));
function add1(a, b) {
return a + b
};//函数直接定义
alert(add1(5, 9));
function message() {
alert(document.getElementById("a1").value);//可以得到value值
alert(document.getElementsByName("a2").length);//可以得到这个元素节点的个数
alert(document.getElementsByTagName("input").length);//这里或得这个标签的个数
alert(document.getElementById("a3").firstChild.nodeValue);//可以得到h1的文本节点
alert(document.getElementById("a3").childNodes[0].nodeValue);
和上面的一样。
}
</script>
</head>
<body>
<form action="#" method="get" name="from1">
<input type="text" id="a1" name="a2" value="aa"><input
type="submit" value="提交" onclick="message()">
</form>
<h1 id="a3">你好</h1>
</body>
例题2.节点的替换。
<script type="text/javascript">
window.onload = function() {//加载窗口,执行
document.getElementById("bj").onclick = function() {//点击这个节点触发事件
var biElement = document.getElementById("bj");//获取北京节点
var cqElement = document.getElementById("cq");//获取重庆节点
var pElement = biElement.parentNode;//获得北京节点的父节点
pElement.replaceChild(cqElement, biElement);//用重庆节点把北京节点替换,但是下面的重庆节点会没有
}
}
</script>
</head>
<body>
<input type="button" value="check">
<ul>
<li id="bj">北京</li>
<li>天津</li>
<li>杭州</li>
<li>大连</li>
</ul>
<ul>
<li id='cq'>重庆</li>
<li>南京</li>
<li>云南</li>
<li>连云港</li>
</ul>
</body>
3.对节点的添加
window.οnlοad=function(){
var liElement= document.createElement("li");//创建一个元素节点
liElement.setAttribute("id","fish");//设置该节点的属性。
var liTextElement=document.createTextNode("鱼");//创建一个文本节点
var foodElement=document.getElementById("food");//获取一个已经存在的父节点
foodElement.appendChild(liElement);//将创建的元素节点挂到上面
liElement.appendChild(liTextElement);//将创建的文本挂到元素节点上
}
</script>
</head>
<body>
<ul id="food">
</ul>