一DOM简介
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件
D：文档 – html 文档 或 xml 文档
O：对象 – document 对象的属性和方法
M：模型
HTML DOM 树
note接口常用的特性和方法
| nodeName | String | 节点的名字；根据节点的类型而定义 |
| nodeValue | String | 节点的值；根据节点的类型而定义 |
| nodeType | Number | 节点的类型常量值之一 |
| ownerDocument | Document | 指向这个节点所属的文档 |
| firstChild | Node | 指向在childNodes列表中的第一个节点 |
| lastChild | Node | 指向在childNodes列表中的最后一个节点 |
| childNodes | NodeList | 所有子节点的列表 |
| previousSibling | Node | 指向前一个兄弟节点；如果这个节点就是第一个兄弟节 点，那么该值为null |
| nextSibling | Node | 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节 点，那么该值为null |
| hasChildNodes() | Boolean | 当childNodes包含一个或多个节点时，返回真 |
| attributes | NamedNodeMap | 包含了代表一个元素的特性的Attr对象；仅用于Element 节点 |
| appendChild(node) | Node | 将node添加到childNodes的末尾 |
| removeChild(node) | Node | 从childNodes中删除node |
| replaceChild (newnode, oldnode) | Node | 将childNodes中的oldnode替换成newnode |
| insertBefore (newnode, refnode) | Node | 在childNodes中的refnode之前插入newnode |
二.查找操作Dom节点
1查找元素节点
document.getElementById();
<input type=“text” value=“新中国成立60周年" id="tid">
function test(){
var usernameElement=document.getElementById(“tid");
//获取元素的值
alert("usernameElement.value: "+usernameElement.value)
//获取元素的类型
alert("usernameElement.type: "+usernameElement.type)
}
getElementsByName();
<form name="form1">
<input type="text" name="tname" value="国庆60年_1" /><br>
<input type="text" name="tname" value="国庆60年_2" /><br>
<input type="text" name="tname" value="国庆60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok" οnclick="test();">
</form>
function test(){
var tnameArray=document.getElementsByName("tname");
alert(tnameArray.length);
for(var i=0;i<tnameArray.length;i++){
window.alert(tnameArray[i].value);
}
}
getElementsByTagName()
// //处理input
// var inputElements=document.getElementsByTagName("input");
// //输出input标签的长度
// //alert(inputElements.length);
// for(var i=0;i<inputElements.length;i++){
// if(inputElements[i].type!='button'){//submit
// alert(inputElements[i].value);
// }
// }
//处理select
// //获取select标签
// var selectElements=document.getElementsByTagName("select");
// //获取select下的子标签
// for(var j=0;j<selectElements.length;j++){
// var optionElements=selectElements[j].getElementsByTagName("option");
// for(var i=0;i<optionElements.length;i++){
// alert(optionElements[i].value);
// }
// }
处理文本域textarea
var textareaElements=document.getElementsByTagName("textarea");
alert(textareaElements[0].value);
2.查找是否存在子节点
hasChildNodes()
<script type="text/javascript">
window.οnlοad=function(){
var selectElements=document.getElementsByTagName("select");
alert(selectElements[0].hasChildNodes())
}
</script>三.Dom的属性
3.1.nodeName
var name = node.nodeName;
* 如果节点是元素节点，nodeName返回这个元素的名称
* 如果是属性节点，nodeName返回这个属性的名称
* 如果是文本节点，nodeName返回一个内容为#text 的字符串
注:nodeName 是一个只读属性。
三者的区别:
第一步假设等等我们的html的结构是一本书，那么元素节点就是每页书，而文本节点则是每页书中的文字，属性节点就是这些文字的颜色，字体
第二步让我们在实例中获得启发
例如<p></p><br/><body></body>这就是元素节点
<p> “Hello,World”</p> 中 “Hello,World”等属于文本节点
<p class="lucy"></p>中class="lucy"属于属性节点
3.2 nodeType
返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
元素节点对应的是1
属性节点对应的是2
文本节点对应的是3
3.3 nodeValue
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
如果给定节点是一个元素节点，返回值是 null
梳理易混肴:
value 与nodeValue的区别:看下面例子
<h1 id="h1">明天休息</h1>
<input type="text" id="input" value="明天放假"/>
<script type="text/javascript">
var h1=document.getElementById("h1");
alert(h1.childNodes[0].nodeValue);//弹出明天休息
var i=document.getElementById("input");
alert(i.value);//弹出明天放假
</script>
总结:value获取的是比如 input标签里的value值,select的option的值,textarea里的值
nodeValue如果要想获取文本内容,则需要获取他的文本节点,可以通过childNodes[],firstChild,lastChild.直到找到 文本节点才能输出文本内容
四.替换节点
replaceChild()
把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中
例子,点击北京节点替换成反恐节点
<ul id=city>
<li id="bj">北京</li>
<li id="sh">上海</li>
</ul>
<ul id="game">
<li id="lol">lol</li>
<li id="fk">反恐精英</li>
</ul>
<script type="text/javascript">
var city=document.getElementById("city");
var game=document.getElementById("game");
city.οnclick=function(){
var bj=document.getElementById("bj");
var fk=document.getElementById("fk");
var reference = city.replaceChild(fk,bj);
game.appendChild(bj);
}
</script>五.属性节点
1.获取属性节点<li name="beijing" id="bj">北京</li>
<script type="text/javascript">
var bj=document.getElementById("bj");
alert(bj.getAttribute("name"));
</script>2.设置属性节点
setAttribute()
将给定元素节点添加一个新的属性值或改变它的现有属性的值。
element.setAttribute(attributeName,attributeValue);
属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在，它的值将被刷新；
如果不存在，setAttribute()方法将先创建它再为其赋值。
<li id="bj">北京</li>
<script type="text/javascript">
var bj=document.getElementById("bj");
bj.setAttribute("name","北京")
alert(bj.getAttribute("name"));
</script>六.创建节点
创建元素节点
createElement()
按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.
var reference = document.createElement(element);
方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象.
var pElement = document.createElement("p");
创建新文本节点
按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.
var reference = document.createElement(element);
方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象.
var pElement = document.createElement("p");
<p id="love">nihao</p>
<script type="text/javascript">
var pElement=document.createElement("li");//创建li元素
//设置属性值
pElement.setAttribute("id","pid");
//获取父元素
var loveElement=document.getElementById("love");
//在父元素中增加子元素
loveElement.appendChild(pElement);
//通过id获取刚创建的元素
var pidElement=document.getElementById("pid");
alert(pidElement.getAttribute("id"));
</script>创建新文本节点
createTextNode()
创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
var textNode = document.createTextNode(text);
方法只有一个参数：新建文本节点所包含的文本字符串
方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性
<p id="love"></p>
<script type="text/javascript">
//获取父元素
var loveElement=document.getElementById("love");
//在父元素中增加子元素
var text=document.createTextNode("上海");
loveElement.appendChild(text);<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected">本科^^^^^</option>
<option value="高中">高中^^^^^</option>
</select>
<script type="text/javascript">
var edu=document.getElementById("edu");//获取父节点
var option=document.createElement("option")//创建子节点
edu.appendChild(option);//将option节点追加到select下
var text=document.createTextNode("大专");//创建文本节点
option.appendChild(text);//将文本节点追加到option下
alert(text.nodeValue);
</script>七.插入节点
appendChild()
insertBefore()
把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用
八.删除节点
removeChild()
从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
某个
节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除
<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul>
var ulElement=document.getElementById("city");
var liElement=document.getElementById("beijing");
ulElement.removeChild(liElement);
<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul>
<ul id="city01"><li value="shanghai^" id="shanghai">上海</li> </ul>
<script type="text/javascript">
//获取父节点
var childNode=document.getElementById("beijing");
var parentCityNode=childNode.parentNode;
parentCityNode.removeChild(childNode);
</script>
九.经典案例
一.复选按钮
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" id="checkItems" value="1" />全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="游泳" />游泳
<input type="checkbox" name="items" value="唱歌" />唱歌
<br>
<input type="button" name="checkall" id="checkall1" value="全选" />
<input type="button" name="checkall" id="checknotall" value="全不选" />
<input type="button" name="checkall" id="checkreverse" value="反选" />
</body>
<script type="text/javascript">
window.οnlοad=function(){
var items=document.getElementsByName("items");
document.getElementById("checkall1").οnclick=function(){
for (var i = 0; i < items.length; i++) {
items[i].checked=true;
}
}//全选
document.getElementById("checknotall").οnclick=function(){
for (var i = 0; i < items.length; i++) {
items[i].checked=false;
}
}//全不选
document.getElementById("checkreverse").οnclick=function(){
for (var i = 0; i < items.length; i++) {
items[i].checked=!items[i].checked;
}//反选
}
document.getElementById("checkItems").οnclick=function(){
if (checkItems.checked) {
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
}else {
for(var i=0;i<items.length;i++){
items[i].checked=false;
}//全选/全不选
}
}
}
</script>
二.下拉框
<div style="float: left;margin-right: 10px">
<select id="first" size="10" multiple="multiple" οndblclick="">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</div>
<div style="float: left;margin-right: 10px">
<input id="leftone" type="button" value="------>"/><br><br>
<input id="leftAll" type="button" value="====>"/><br><br>
<input id="rightone" type="button" value="<------"/><br><br>
<input id="rightAll" type="button" value="<===="/><br>
</div>
<select id="second" size="10" multiple="multiple">
<option value="选项9">选项9</option>
</select>
<script type="text/javascript">
var leftAll=document.getElementById("leftAll");
var first=document.getElementById("first");
var second=document.getElementById("second");
var rightAll=document.getElementById("rightAll");
leftAll.οnclick=function (){
var option=first.childNodes;//获取第一个下拉框的id的子元素也就是option
var len=option.length;//获取他的初始长度,不能放在循环里
for(var i=0;i<len;i++){
second.appendChild(option[0]);//依次循环添加
}
}
rightAll.οnclick=function(){
var option=second.childNodes;
var len=option.length;
for(var i=0;i<len;i++){
first.appendChild(option[0]);
}
}
var leftone=document.getElementById("leftone");
leftone.οnclick=function (){
var option=first.childNodes;
var len=option.length;
for (var i = 0; i <len; i++) {
if (option[i].selected) {
second.appendChild(option[i]);
}
}
}
var rightone=document.getElementById("rightone");
rightone.οnclick=function(){
var option=second.childNodes;
var len=option.length;
for (var i = 0; i <len; i++) {
if (option[i].selected) {
first.appendChild(option[i]);
}
}
}
</script>
808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
