【无标题】

DOM编程

Hello，大家好今天我们学习的是DOM编程，现在就由我来给大家介绍一下吧！

什么是DOM？

①文档对象模型（Document Object Model）
②通过DOM可以动态改变文档内容

动态改变文档内容的原理
1.解析文档（如HTML）并生成DOM树
2.通过DOM标准接口+编程语言改变文档内容

解析文档生成DOM树的过程

• List item

DOM树中的节点类型和节点关系

1. List item

2. 常见的Core DOM属性和方法如下：
   属性：
   1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName是只读的。

   2 .nodeType 值：1，元素节点；2，属性节点；3，文本节点。nodeType是只读的。

   3 .nodeValue 返回一个字符串，指示这个节点的值。元素节点返回null，属性节点返回属性值，文本节点返回文本。nodeValue可读可写，这是对元素节点不能写。一般只用于设置文本节点的值。

   4 .childNodes 返回子节点数组。文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性，要删除添加节点可不能用操作childNodes数组的办法。

   5 .firstChild 返回第一个子节点。文本和属性节点没有子节点，会返回一个空数组，这是针对这二位的特殊待遇。对于元素节点，若是没有子节点会返回null.有一个等价式：firstChild=childNodes[0].

   6 .lastChild 返回最后一个子节点。返回值同firstChild,三方待遇参考上面。有一个等价 式:lastChide=childNodes[childNodes.length-1].

   7 .nextSibling() 返回节点的下一个兄弟节点。如果没有下一个兄弟节点的话，返回null。只读属性，不可以更改应用。

   8 .previousSibling() 返回节点的上一个兄弟节点。

   9 .parentNode() 返回节点的父节点。document.parentNode()返回null，其他的情况下都将返回一个元素节点，因为只有元素节点拥有子节点，出了document外任何节点都拥有父节点。parentNode()，又是一个只读的家伙。

**

Core DOM的操作**

查看节点

访问指定节点的方法：
getElementById( ) ：返回一个节点对象
getElementsByName( )：返回多个（节点数组）
getElementsByTagName( ) ：返回多个（节点数组）
查看/修改属性节点
查看/修改属性节点
getAttribute("属性名") 
setAttribute("属性名","属性值")

根据层次关系查找节点
parentNode
firstChild
lastChild
childNodes

创建和增加节点
创建和增加节点 的方法
createElement（）：创建节点
appendChild（）：末尾追加方式插入节点
insertBefore（）：在指定节点前插入新节点
cloneNode（）：克隆节点

function newNode(){
  var oldNode=document.getElementById("sixty1");  
  var image=document.createElement("img");    
  image.setAttribute("src","images/newimg.jpg");   
  document.body.insertBefore(image,oldNode);   
}

function copyNode(){
  var image=document.getElementById("sixty1");  
  var copyImage=image.cloneNode(false);            
  document.body.appendChild(copyImage);     
}

删除和替换节点的方法
removeChild（）：删除节点
replaceChild( ) ：替换节点

function delNode(){
  var dNode=document.getElementById("sixty1");  
  document.body.removeChild(dNode);       
}
function repNode(){
                                      var oldimage=document.getElementById("sixty2");  
  var newimage=document.createElement("img");        
  newimage.setAttribute("src","images/replace.jpg");   
  document.body.replaceChild(newimage,oldimage);       
}

什么是HTML DOM对象？

• List item
  HTML文档中的每个节点都是DOM对象，
  每类对象都有1套属性、方法。
  最常用的是表格和各类表单元素对象

HTML DOM对象 的属性访问

function change(){
  var imgs=document.getElementById("s1");
  imgs.src="images/grape.jpg";
  不再使用setAttribute（）/
   getAttribute（）方法
简化为对象名.属性值进行读取或修改
}
  function show(){
  var hText=document.getElementById("s1").alt;
  alert("图片的alt是："+hText)
}
</script>

例题
实现“删除第2行”的操作
实现“修改标题”的操作

function delRow(){
    document.getElementById("myTable").deleteRow(1); 
    }
function updateRow(){
  var uRow=document.getElementById("myTable").rows[0];
  uRow.className="title";
}

实现“增加一行”的操作

function addRow(){	
var newRow=document.getElementById("myTable").insertRow(2);
var col1=newRow.insertCell(0);
col1.innerHTML="幸福从天而降";
var col2=newRow.insertCell(1);
col2.innerHTML="¥18.5";
col2.align="center";
} 

好了今天的DOM分享在这里也差不多结束了哦
下次见！！