js中的dom
今天内容
javascript---dom
------------------------------------------------------------------------
1.作业
--------------------------------------
1.js中的dom
dom是什么? xml
1.什么是xml
xml 可扩展的标记语言.
它的主要作用是用来存储与传输数据.
xml标记没有被预定义.----xml标记要求严格。标记必须结束.
xml与html区别
XML 不是 HTML 的替代。
XML 和 HTML 为不同的目的而设计：
XML 被设计为传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。
HTML 旨在显示信息，而 XML 旨在传输信息。
2.什么是dom document object model
是我们的html或者xml加载到内存后会形成一个树型结构，我们管这个树形结构叫dom。
也经常叫dom树.
3.xmldom 与 htmldom 区别与联系?
html本身也是一个xml。
我们在对html进行操作时，可以像对xml一样进行操作.
xmldom针对于xml有一套自己的dom解析api--它适用于所有的xml 也就是也适用于html。
html文档本身提供了一套dom解析 API-----它对html操作会比xml操作容易.
而html的dom解析api对于html操作如 表单，表格操作起来更方便(与xmldom相比)
4.以下代码一共有几个element text attribute
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>History和Location使用</title>
</head>
<body>
<input type="button" value="返回" onclick="history.back();" />
</body>
</html>
6个element
text: 9个 回车换行 这些空文本也做为text节点存在.
attribute: 5个
----------------------------------------------------------------------
学习dom应该从document对象开始.
2.dom操作
1.怎样获取页面上的节点.(重点)***************************************
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。 NodeList
getElementsByTagName() 根据标签名称 NodeList
NodeList
属性 length
方法 item()
--------------------------------------------
2.关于所有的Node所具有公共的三个属性.(了解)
nodeType----节点的类型
元素 1
属性 2
文本 3
nodeValue---节点值
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值
nodeName-----节点的名称
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
3.关于node之间的关系
父:parentNode
子:childNodes
兄弟: previousSibling nextSibling
--------------------------------------------------------
练习1
<h1>明天休息</h1>
打印 ”明天休息” (利用两种方法)
firstChild---得到第一个子元素.
练习2
<ul>
<li id="bj" value="beijing">
北京
<p>海淀</p>
奥运
</li>
<li id="sh" value="shanghai">上海</li>
</ul>
要求:
打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue)
同时打印文本值 北京 海淀 奥运
//1.得到id=bj元素
var bj=document.getElementById("bj");
//2.得到所有的子节点
var bjson=bj.childNodes;
//3.遍历bjson
for(var i=0;i<bjson.length;i++){
alert(bjson[i].nodeName+" "+bjson[i].nodeType+" "+bjson[i].nodeValue);
}
//得到pj这个标签中的文本值
textContent 在firefox中ok
innerText 在ie中ok。
练习3
<select name="edu" id="edu">
<option value="本科">本科^^</option>
<option value="大专">大专^^</option>
<option value="中专">中专^^</option>
<option value="幼儿园">幼儿园^^</option>
</select>
要求:
输出所有select元素下的所有option元素中对应的文本内容
例如:<option value="中专">中专^^</option> 输出--->中专^^
------------------------------------------------------------------------------------
4.关于xmldom中的CRUD
节点操作
DOM 获取节点
元素 :getElementById getElementsByName getElementsByTagName
属性 : getAttribute()
文本 : nodeValue textContent innerText
DOM 改变节点
元素: 对于元素节点我们一般在开发不进行改变。
属性:setAttribute
文本: nodeVlaue innerText
DOM 删除节点
元素: removeChild 注意:必须找到父元素才能删除子元素. parentNode
属性: removeAttribute 这个操作应用比较少
文本: 对于文本节点我们一般不删除，清空。 nodeValue=""; innerText=""
DOM 替换节点
元素:replaceChild
属性:没有这种操作 要吗删除，要吗添加
文本:就是修改文本
DOM 创建节点
元素:createElement 应用比较多
属性: 不操作
文本: 不操作
DOM 添加节点
元素 appendChild---应用比较多 需要使用父元素进行添加.
属性 setAttribute() 没属性添加，有属性修改
文本 innerText nodeValue
DOM 克隆节点
cloneNode(true/false) 参数true代表，元素中的所有子元素都被克隆.false只克隆本身，子元素不会进行克隆.
---------------------------------------------------------------------------------------------------
复习
dom
1.xml作用 它是用于存储与传输数据。
2.dom---就是xml或html它加载到内存中会形成一个树型结构。dom树。
3.关于dom操作-----document
1.关于获取操作
getElementById
getElementsByName
getElementsByTagName.
2.树的每一个结点都是node
element
text
attribute
3.关于node三个属性
nodeType
nodeValue
nodeName
所有的node都具有一个innerHTML方法.
4.关于node之间的关系
parentNode
childNodes
兄弟结点
firstChild
lastChild
5.关于dom的crud操作
----------------------------------------------------------
dom练习:
练习1---添加元素
<select id="edu">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="学士">学士</option>
<option value="烈士">烈士</option>
</select>
有这样一个select 要求向其中添加一个
<option value="圣斗士">圣斗士</option>
怎样完成:
1.xmldom
1.得到id为edu的select。
2.创建一个元素 var option=document.createElement("option");
3.给option添加一个属性 value="圣斗士" 在给option添加一个子元素 圣斗士
4.将option元素添加到edu中.
2.htmldom
1.得到id为edu的select。
2.创建一个元素 var option=document.createElement("option");
3.option.value="圣斗士" option.text="圣斗士";
4.select.add(option);
----------------------------------------------------------
练习2----动态将信息添加到table中.
姓名:<input type="text" id="username">
EMAIL:<input type="text" id="email">
电话:<input type="text" id="telephone"> <br>
<input type="button" value="添加">
<hr>
<table id="tab" border='1'>
<tr>
<th>姓名</th>
<th>EMAIL</th>
<th>电话</th>
<th>操作</th>
</tr>
</table>
1.使用htmldom
DOM Table -----table
DOM TableCell ---单元格
DOM TableRow ---行
2.使用innerHTML
当点击按钮时，将信息得到，并手动封装成字符串
"<tr><td>username</td><td>email</td><td>telephone</td><td><a href='#' onclick='delRow(this)'>Delete</a></td></tr>"
得到id为tab的table，合适innerHTML+=上面的字符串.
问题:当点击超链接时，怎样删除当前行.
当超链接被点击时，调用一个delRow方法，将this传递到delRow方法中.
在delRow方法中可以通过 parentNode.parentNode得到最终要删除的tr。
在通过table调用removeChild方法将这一行删除。
注意:当我们页面上的table添加信息后，会发现浏览器自动给tr外面添加了一个tbody这样的父元素.
------------------------------------------------------------------
练习3
关于checkbox练习
对于checkbox，我们要设置与获取其是否被选中可以通过 checked属性获取。这个属性值如果为true,代表选中。
为false，取消。
1.全选/全不选
1.得到当前的checkbox的checked的值.
2.让其它的chckbox的checked值与上面的那个一样就可以。
2.全选
得到所有的hobby,设置其checked的值为true
3.全不选
得到所有的hobby,设置其checked的值为false
4.反选
得到所有的hobby,设置其checked的值当前值取反.
--------------------------------------------------------------------
练习4
关于选项操作
界面:两个select与4个按钮.
关于功能实现
1.怎样可以让左边的一项移动到右边?
怎样得到select中的选中项?
select.options;----得到所有的option的数组.
select有一个属性叫selectedIndex。得到被选中项的索引.
var option=select.options[select.selectedIndex]----得到了被选中的项。
rightSelect.add(option);
2.怎样将左边的全部移动的右边。
options得到全部，编列所有的，使用rightSelect.add将所有的添加到右边就可以。
----------------------------------------------------------------------------------------
练习5
省市二级联动.
1.省市信息是从xml文件中读取出来的.
<?xml version="1.0" encoding="utf-8"?>
<china>
<province name="河北省">
<city>石家庄</city>
<city>保定</city>
<city>邯郸</city>
<city>承德</city>
<city>秦皇岛</city>
</province>
<province name="山东省">
<city>济南</city>
<city>青岛</city>
<city>烟台</city>
<city>淄博</city>
<city>威海</city>
</province>
<province name="河南省">
<city>郑州</city>
<city>南阳</city>
<city>安阳</city>
<city>洛阳</city>
<city>开封</city>
</province>
</china>
怎样可以读取出xml文件中的内容--------使用js操作.
<script type="text/javascript">
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}
try
{
xmlDoc.load("china.xml");
document.write("xmlDoc is loaded, ready for use");
}
catch(e) {alert(e.message)}
</script>
--------------------------------------------------------------------
问题:当页面加载成功后，我们得到了xml文件的document对象，我们做的第一件事件应该是什么?
将xml文件中定义的省份的名称添加到province的select中。
就需要对xmlDom进行操作，得到所有的province的name属性值.
xmlDom.getElementsByTagName("province");
上面得到的是一个NodeList,对其进行遍历，得到属性name的值。
province.getAttribute("name");
根据得到的省份的名称创建option，option.text就是省份的名称.
问题:当省份信息已经添加成功后，我们选择某一个省份时，怎样获取其对应的城市信息?
1.得到province中选中项的名称.---得到选中的省份名称.
2.拿着得到的选中的省份名称去china.xml文件中查找其对应的城市。
3.得到所有的城市名称，添加到city这个select中.
注意：当选择了省份时，我们需要添加城市，这时先将城市中的所有内容清空。
--------------------------------------------------------------------------------------
总结:
1.dom是什么？dom可以做什么?
2.dom中的node存在关系 父，子，兄弟。
3.xmldom与htmldom区别与联系
4.dom操作中获取
getElementById
getElementsByName
getElementsByTagName
5.Node Element Text Attribute.
6.关于node相关操作.
crud。 克隆.
7. 练习----目的是为了dom的结构与操作.
课外作业:用这几天学习的内容做一个贪吃蛇.
1.界面----可以将整个页面分成20行20列.
2.蛇就是几个连续的方格.
3.自动移动 setInterval
4.改变方向 根据keyCode.
5.关于吃食物长身体
6.关于蛇可以死亡.
