javascript基础知识笔记_第1页
javascript基础知识笔记_第2页
javascript基础知识笔记_第3页
javascript基础知识笔记_第4页
javascript基础知识笔记_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、1. 节点及其类型:1). 元素节点2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的什么位置编写 js 代码?0). 直接在 html 页面中书写代码.<button id="button" onclick="alert('hello world');">Click Me!</button>缺点: . js 和 html 强耦合, 不利用代码的维护. 若 click 相应函数是比较复杂的, 则需要先定义一个函数,

2、然后再在 onclick 属性中完成对函数的引用, 比较麻烦1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成, 获取不到指定的节点:<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">var

3、 cityNode = document.getElementById("city");/打印结果为 null.alert(cityNode);</script></head><body>.2). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件, 该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点. <head><meta http-equiv="Content-

4、Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">window.onload = function()var cityNode = document.getElementById("city");alert(cityNode);</script></head><body>.3. 如何来获取元素

5、节点:1). *document.getElementById: 根据 id 属性获取对应的单个节点2). *document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度3). document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性,则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以. 4). 其它的两个方法,ie 根本就不

6、支持, 所以不建议使用 /获取指定的元素节点. window.onload = function()代码：/1. 获取 id 为 bj 的那个节点./在编写 HTML 文档时, 需确保 id 属性值是唯一的. /该方法为 document 对象的方法var bjNode = document.getElementById("bj");alert(bjNode);/2. 获取所有的 li 节点. /使用标签名获取指定节点的集合. /该方法为 Node 接口的方法, 即任何一个节点都有这个方法. var liNodes = document.getElementsByTagNa

7、me("li");alert(liNodes.length);var cityNode = document.getElementById("city");var cityLiNodes = cityNode.getElementsByTagName("li");alert(cityLiNodes.length);/3. 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合. var genderNodes = document.getElementsByName("gender");alert(ge

8、nderNodes.length);/若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()/方法对于 IE 无效. 所以使用该方法时需谨慎. var bjNode2 = document.getElementsByName("BeiJing");alert(bjNode2.length);4. 获取属性节点:1). *可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值2). 通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值 /读写属性节点: 通过

9、元素节点 . 的方式来获取属性值和设置属性值. 代码：window.onload = function()/属性节点即为某一指定的元素节点的属性. /1. 先获取指定的那个元素节点var nameNode = document.getElementById("name");/2. 再读取指定属性的值alert(nameNode.value);/3. 设置指定的属性的值.nameNode.value = "尚硅谷"5. 获取元素节点的子节点(*只有元素节点才有子节点!):1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取

10、指定的节点的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取. 2). firstChild 属性获取第一个子节点3). lastChild 属性获取最后一个子节点代码：window.onload = function()/1. 获取 #city 节点的所有子节点.var cityNode = document.getElementById("city");/2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点./但该方法不实用. alert(cityNode.childNodes.length

11、);/3. 获取 #city 节点的所有 li 子节点.var cityLiNodes = cityNode.getElementsByTagName("li");alert(cityLiNodes.length);/4. 获取指定节点的第一个子节点和最后一个子节点. alert(cityNode.firstChild);alert(cityNode.lastChild);6. 获取文本节点:1). 步骤: 元素节点 -> 获取元素节点的子节点2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="Be

12、iJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值 /获取文本节点代码：window.onload = function()/文本节点一定是元素节点的子节点. /1. 获取文本节点所在的元素节点var bjNode = document.getElementById("bj");/2. 通过 firstChild 定义为到文本节点var bjTextNode = bjN

13、ode.firstChild;/3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值. alert(bjTextNode.nodeValue);bjTextNode.nodeValue = "尚硅谷"/alert(bjTextNode);7. 节点的属性:1). nodeName: 代表当前节点的名字. 只读属性. *如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串2). nodeType：返回一个整数, 这个数值代表着给定节点的类型. 只读属性. 1 - 元素节点, 2 - 属性节点, 3 - 文本节点 *3). no

14、deValue：返回给定节点的当前值(字符串). 可读写的属性. 元素节点, 返回值是 null. 属性节点: 返回值是这个属性的值. 文本节点: 返回值是这个文本节点的内容 8. 创建一个元素节点:1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1. *新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象. 9. 创建一个文本节点:1). createTex

15、tNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3. 方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里 10. 为元素节点添加子节点:1). appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点. 方法的返回值是一个指向新增子节点的引用指针. 11. 节点的替换:1). replaceChild

16、(): 把一个给定父元素里的一个子节点替换为另外一个子节点var reference = element.replaceChild(newChild,oldChild);返回值是一个指向已被替换的那个子节点的引用指针2). 该节点除了替换功能以外还有移动的功能. 3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:/* * 互换 aNode 和 bNode * param Object aNode * param Object bNode */function replaceEach(aNode, bNode)if(aNode = bNode)return;var aPar

17、entNode = aNode.parentNode;/若 aNode 有父节点if(aParentNode)var bParentNode = bNode.parentNode;/若 bNode 有父节点if(bParentNode)var tempNode = aNode.cloneNode(true);bParentNode.replaceChild(tempNode, bNode);aParentNode.replaceChild(bNode, aNode); 12. 插入节点:1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var re

18、ference = element.insertBefore(newNode,targetNode); 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。 2). 自定义 insertAfter() 方法 /* * 将 newChild 插入到 refChild 的后边 * param Object newChild * param Object refChild */function insertAfter(newChild, refChild)var refPare

19、ntNode = refChild.parentNode;/判断 refChild 是否存在父节点if(refParentNode)/判断 refChild 节点是否为其父节点的最后一个子节点if(refChild = refParentNode.lastChild)refParentNode.appendChild(newChild);elserefParentNode.insertBefore(newChild, refChild.nextSibling); 完整代码:window.onload = function()alert("abc");/1. 把 #rl 插入

20、到 #bj 节点的前面var cityNode = document.getElementById("city");var bjNode = document.getElementById("bj");var rlNode = document.getElementById("rl");/cityNode.insertBefore(rlNode, bjNode);/var refNode = document.getElementById("se");var refNode = document.getElemen

21、tById("dj");insertAfter(rlNode, refNode);/把 newNode 插入到 refNode 的后面function insertAfter(newNode, refNode)/1. 测试 refNode 是否为其父节点的最后一个子节点var parentNode = refNode.parentNode;if(parentNode)var lastNode = parentNode.lastChild;/2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点. if(refNode = lastNode)pa

22、rentNode.appendChild(newNode);/3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟/节点的前面.elsevar nextNode = refNode.nextSibling;parentNode.insertBefore(newNode, nextNode); 13. 删除节点:1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node);返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节

23、点所包含的所有子节点将同时被删除. 如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。 14. innerHTML属性:1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容例子:window.onload = function()/1. 为 #province 添加 onchange 响应函数document.getElementById("province").onchange = function()/ 2.加载cities.xml 文件。得到do

24、cument对象var cityNode=document.getElementById("city");var cityNodeOptions=cityNode.getElementsByTagName("option");var len =cityNodeOptions.length;for(var i=1;i<len;i+)cityNode.removeChild(cityNodeOptions1);var xmlDoc=parseXml("cities.xml");var provinces=xmlDoc.getElem

25、entsByTagName("province");/alert(provinces.length);/4.在cities.xml文档中查找和选择的省匹配的provices节点。var provinceVal=this.value;var provinceEles=xmlDoc.selectNodes("/provincename='" +provinceVal+"'");/alert(provinceEles.length);var cityNodes= provinceEles0.getElementsByTagN

26、ame("city");/alert(cityNodes.length);for (var i=0;i<cityNodes.length;i+)/alert(cityNodesi.firstChild.nodeValue);var cityText=cityNodesi.firstChild.nodeValue;var cityTextNode=document.createTextNode(cityText);var optionNode= document.createElement("option");optionNode.appendChi

27、ld(cityTextNode);document.getElementById("city").appendChild(optionNode);/5.遍历city子节点，得到每一个city子节点 /6.利用得到的文本值创建option节点 /7.并把6创建的option节点添加为city的子节点/js 解析 xml 文档的函数, 只支持 iefunction parseXml(fileName) /IE 内核的浏览器 if (window.ActiveXObject) /创建 DOM 解析器 var doc = new ActiveXObject("Micros

28、oft.XMLDOM"); doc.async = "false" /加载 XML 文档, 获取 XML 文档对象 doc.load(fileName); return doc; /需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中/若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中/若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中/若 name=items 的 checkbox 有一

29、个没有被选中, 则 #checkedAll_2 取消选择./提示: 事件需要加给 #checkedAll_2, 获取 name=items 的 checkbox 数组/判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择/若没有被选择, 则 name=items 的 checkbox 都要取消选择/根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择/checked = false 取消选择. /还需要给每个 name=items 的 checkbox 加响应函数/判断 name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等./若都被选择: 则使 #checkedAll_2 被选择/若没有都被选择: 则使 #checkedAll_2 取消选择window.onload = function()document.getElementById("checkedAll_2").onclick = function()var flag = this.checked;var items = document

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论