任务视频V2.0

任务视频V1.0

知识点

查看节点

1.使用getElement系列方法访问指定节点

在HTML文档中访问节点的标准方法是我们之前学习的getElementById()、getElmentByName()和getElementByTag()，只是它们查找的方法略有不同。

 getElementById()：是HTML DOM提供的查找方法，它是按id属性查找的。

getElmentByName()：是HTML DOM提供的查找方法，它是按name属性查找的，由于一个文档中可能会有多个同名节点（如复选框、单选按钮），所以返回的是元素数组。

getElementByTag()：是Core DOM提供的查找方法，它是按标签名TagName查找的，由于一个文档中可能会有多个同类型的标签节点（如图片组、文本输入框），所以返回元素数组。

如果我们想动态改变文档中某些元素的属性，例如，改变一个图片的路径，使之动态地在页面中显示另一个图片，例如图片改变，或者是改变一个节点中的文本、超链接等，该如何实现呢？HTML DOM提供了获取及改变节点属性值得标准方法。

getAttribute(“属性名”)：用来获取属性的值。

setAttribute(“属性名”，”属性值”)：用来设置属性的值。

2 根据层次关系查找节点

通过getElementById()、getElmentByName()和getElementByTag()这三种方法可查看HTML文档中的任何元素，但是这三种方法都会忽略文档的结构，因此在HTML DOM中提供了三个属性parentNode、firstChild和lastChild，这三个属性可遵循文档的结构，在文档的局部进行“短距离的查找元素”

创建和增加节点                   

删除和替换节点           

教学课件V2.0

教学课件V1.0

Core DOM方式实现动态添加表格

任务描述

对下图所示的页面中的表格进行操作，要求如下：

• 单击“增加一行”按钮，可以在书名为“60个瞬间”的所在行前插入一行，新插入行的价格一列居中显示

• 单击“删除第2行”按钮可把书名为“看得见风景的房间”一行删除。

• 单击“修改标题样式”按钮，可以设置标题行居中显示，字体加粗，单元格的背景颜色变为“#cccccc”。

• 单击“复制最后一行”按钮，复制书名为“60个瞬间”所在行，并且追加到表格的末尾

任务分析

    1.查找到对应节点

    2.使用createElement()方法新增节点，并将新增节点追加到页面

    3.使用removeChild()方法删除节点

    4.使用cloneNode()方法复制节点

    5.使用setAttribute()方法设置属性

任务实现

<scripttype="text/javascript">

function addRow(){       

varfRow=document.getElementById("row3");

varnewRow=document.createElement("tr") ;//创建行节点

varcol1=document.createElement("td");  //创建单元格节点

col1.innerHTML="幸福从天而降";           //为单元格添加文本

varcol2=document.createElement("td");

col2.innerHTML="&yen;18.50";

col2.setAttribute("align"，"center");

newRow.appendChild(col1);              //把单元格添加到行节点中

newRow.appendChild(col2);

document.getElementById("row3").parentNode.insertBefore(newRow，fRow);  //把行节点添加到表格末尾

        }

function updateRow(){

        varuRow=document.getElementById("row1");

        //标题行设置为字体加粗、文本居中显示，背景颜色为灰色

  uRow.setAttribute("style"，"font-weight:bold;text-align:center;background-color:#cccccc;");

        }

function delRow(){

        vardRow=document.getElementById("row2"); //访问被删除的行

         dRow.parentNode.removeChild(dRow);         //删除行

        }

function copyRow(){

        varoldRow=document.getElementById("row3"); //访问复制的行

        varnewRow=oldRow.cloneNode(true);          //复制指定的行及子节点

        document.getElementById("myTable").appendChild(newRow);//在指定节点的末尾添加行

        }

</script>

......

<input name="b1"type="button" value="增加一行"onclick="addRow()" />

<input name="b2"type="button" value="删除第2行"  onclick="delRow()"/>

<input name="b3"type="button" value="修改标题样式"  onclick="updateRow()"/>

<input name="b4"type="button" value="复制最后一行"  onclick="copyRow()" />

在页面中输入你的评论，单击“评论”按钮，如果留言区没有评论，则直接添加评论，如果留言区有评论，则将新的评论添加在留言区的最前面，如图所示。

参考答案