js结点(dom)

1 . dom:
document object model 文档对象模型；
2 . xml和html类似，加载到内存中会形成一颗树(树形结构),可以对该树进行操作：
3 . 测试hasChildNodes() 返回值是true/false
备注：元素中间没有任何内容包含空格 才算没有孩子

var id01 = document.getElementById("id01");var id02 = document.getElementById("id02");          alert(id01.hasChildNodes()+"======"+id02.hasChildNodes());

4 .
结点分类：
* 1. 元素结点：结点名称nodeName :元素名 结点类型nodeType：1 结点值 nodeValue:null
* 2. 属性结点：结点名称nodeName:属性名 结点类型nodeType：2 结点值 nodeValue：属性值
* 3. 文本结点：结点名称nodeName:#text 结点类型nodeType:3 结点值 nodeValue:文本内容

    var id01 = document.getElementById("id01");    var id02 = document.getElementById("id02");   alert("=name="+id01.nodeName+"=type="+id01.nodeType+"=value="+id01.nodeValue);

5 .
在元素上找属性
步骤:先获取元素,在获取此元素的属性(两个步骤)

var title01 = id01.getAttributeNode("title");               alert("=name="+title01.nodeName+"=type="+title01.nodeType+"=value="+title01.nodeValue);

6 .
文本结点：
结点名称nodeName:#text 结点类型nodeType:3 结点值 nodeValue:文本内容
方式一：
直接获取文本值： 获取id=id03元素的文本值
var id03 = document.getElementById(“id03”);
textContent直接获取元素的文本内容，trim()去除前后空格
alert(id03.textContent.trim());
方式二：先获取文本结点，再获取该结点的信息
var textNode = id03.firstChild; alert(“=name=”+textNode.nodeName+”=type=”+textNode.nodeType+”=value=”+textNode.nodeValue.trim());
7 .获取指定元素下的所有孩子是元素的个数
var childElementCount1 = id01.childElementCount;
alert(“孩子是元素的个数：”+childElementCount1);

8 .获取指定元素上的所有结点 (备注：属性结点无法取出，属性结点获取必须是从该元素中调用getAttributeNode得到属性结点才可以获取属性内容)

 var childNodes1 = id03.childNodes;        alert(childNodes1.length);       for(var i = 0; i < childNodes1.length; i++) {                var node1 = childNodes1[i];                if(node1.nodeType == 2) {                    alert("属性值：" + node1.nodeValue.trim());                } else if(node1.nodeType == 3) {                    alert("文本值：" + node1.nodeValue.trim());                }else if(node1.nodeType == 1){                    alert("元素");                }            }

这里详细介绍一下:id03.childNodes是返回id03的所有孩子结点.string.trim()是去除string字符串左右边框的,如果id03的div里面的内容是这样的:

<div id="id03">  <input type="button" value="对对对">                1111111111111</div>

会依次alert:先是文本值那个alert,再是元素的alert,最后是文本值的alert.为什么会是这样?原因是从< div id=”id03”>的结束开始,到< input的前面,是有空格的,是属于文本结点,再是input是属于元素结点的,然后再是从”对对对”后面的>的这个符号后面开始,到div结束标签的<这个符号前面是有空格和1111111111和空格的,属于文本结点.注意alert的时候把空格去掉(trim()).