<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom节点及操作</title>
</head>
<body>
<div id="box" title="标题" style="color:red">测试Div<em>倾斜</em>结尾</div>
<p id="p">我只是个句子</p>
<div id="pox">
<p>测试1</p>
<p>测试2</p>
<p>测试3</p>
</div>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
</body>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
// alert(box.nodeName); //获取元素节点的标签名,和tagName等同
// alert(box.nodeType); //获取元素节点的类型, 1
// alert(box.nodeValue); //此时node本身把节点指针放在元素<div></div>上,本身没有value,null
// alert(box.childNodes); //Nodes 集合,返回当前元素节点所有子节点列表
// alert(box.childNodes.length); //3,三个子节点为:测试Div<em>倾斜</em>结尾
// alert(box.childNodes[1]); //测试第一个子节点,Object Text ,表示为文本节点
//第一个子节点:测试Div, 称做文本节点; 第二个子节点:<em>倾斜</em>,称做元素节点,第三个字节点:结尾,文本节点;
// alert(box.firstChild.nodeValue); //获取第一个子节点的内容
// alert(box.lastChild.nodeValue); //获取最后一个子节点的内容
// alert(box.firstChild.nextSibling.nodeName); //EM,获取下一个同级节点的标签名
// alert(box.lastChild.previousSibling.nodeName); //EM,获取上一个同级节点的标签名
// alert(box.parentNode.nodeName);
//获取当前节点的父节点的标签名
// alert(box.ownerDocument);
//返回文档对象,根节点
// alert(box.attributes);
//NamedNodeMap, 集合数组,保存着这个元素节点所有的属性
// alert(box.attributes.length);
//3个属性
// alert(box.attributes[0].nodeName) //获取第一个属性的标签名
var p=document.getElementById("p");
// p.innerHTML="我<strong>变化</strong>了"; //赋值,改变了文本,解析HTML标签
// p.nodeValue="我<strong>变化</strong>了"; //没有赋值上,nodeValue必须在当前节点操作
// p.childNodes[0].nodeValue="我<strong>变化</strong>了"; //赋值成功,但同时包含HTML标签
var pox=document.getElementById("pox")
// alert(pox.childNodes.length); //7个,换行会导致中间有空白标签
//<div id="pox"><p>测试1</p><p>测试2</p><p>测试3</p></div> ,不换行只有3个
// document.write('<p>这是一个段落!</p>'); //输出任意字符串,会覆盖当前HTML页面,用于测试
// var p=document.createElement("P"); //创建了一个元素P,还没有添加到文档中,驻留在内存中
// pox.appendChild(p); //将新节点添加到子节点列表的末尾上
// var text=document.createTextNode("测试4") //创建一个文本节点
// p.appendChild(text); //把文本添加p里
// var p=document.createElement("p") //创建p节点
// var t=document.createTextNode("测试0") //创建文本节点
// p.appendChild(t); //把文本节点添加到p节点
// pox.insertBefore(p,pox.childNodes[0]); //把这个p节点添加到pox.childNodes[0]前面
// var text=document.createTextNode("Water"); //创建文本节点Water
// var item=document.getElementById("myList").childNodes[0]; //获取ul下的第一个li元素 coffee
// item.replaceChild(text,item.childNodes[0]); //把Water 代替掉原来的ul下的第一个li元素 coffee
var itm=document.getElementById("myList").lastChild; //获取ul下最后一个li元素 ,milk
// var cln=itm.cloneNode(true); //克隆ul下最后一个li元素 ,milk
// itm.appendChild(cln); //把克隆的元素添加到ul子节点列表的末尾上
var list=document.getElementById("myList"); //获取ul
// list.removeChild(list.childNodes[0]); //删除掉ul下第一个li元素 ,coffee
}
/* 知识点:
一.node 节点属性:
节点可以分为元素节点、属性节点和文本节点,而这些节点又有三个非常有用的属性, 分别为:nodeName、nodeType 和 nodeValue。
document.getElementById("box").nodeName //获取元素节点的标签名,和tagName等同
ocument.getElementById("box").nodeType //获取元素节点的类型,
document.getElementById("box").nodevalue //null,node只能获取当前节点的东西,文本节点不等于文本内容
二.层次节点属性:
节点的层次结构可以划分为:父节点与子节点、兄弟节点这两种。当我们获取其中一个 元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点。
childNodes , 获取当前元素节点的所有子节点;
firstChild , 获取当前元素节点的第一个子节点;
lastChild , 获取当前元素节点的第一个子节点;
nextSibling , 获取下一个同级节点的标签名;
previousSibling ,获取上一个同级节点的标签名;
ownerDocument, 返回文档对象,根节点;
三.节点操作:
DOM 不单单可以查找节点,也可以创建节点、复制节点、插入节点、删除节点和替换 节点。
1.write()方法 可以把任意字符串插入到文档中去。
document.write('<p>这是一个段落!</p>'); //输出任意字符串,会覆盖当前HTML页面
2.createElement()方法 可以创建一个元素节点。
document.createElement('p'); //创建一个元素节点
3.appendChild()方法 讲一个新节点添加到某个节点的子节点列表的末尾上。
pox.appendChild(p); //把新元素节点<p>添加到pox子节点末尾
4.createTextNode()方法 创建一个文本节点。
var text =document.createTextNode('测试'); //创建一个文本节点
p.appendChild(text); //将文本节点添加到p标签里
5.insertBefore()方法 在您指定的已有子节点之前插入新的子节点。
pox.insertBefore(p,pox.childNodes[0]); //语法:node.insertBefore(要添加的子节点,指定的节点位置)
6.repalceChild() 方法可以把节点替换成指定的节点。
item.replaceChild(text,item.childNodes[0]); //语法:node.replaceChild(newnode,oldnode)
7.cloneNode() 可以把子节点复制出来。
document.getElementById("myList").lastChild.cloneNode(true); //语法:node.cloneNode(deep),node为需要复制的对象
如果您需要克隆所有后代,请把 deep 参数设置 true,否则设置为 false。
8.removeChild() 方法可以删除指定节点
ist.removeChild(list.childNodes[0]); //语法:node.removeChild(node)
也可以用innerHTML=null来删除指定节点;
*/
</script>
</html>