搜索
/*****第一天*****/总结:1.调试:打桩:在程序的关键位置，输出关键变量的值顺序:方法调用的顺序2.串联知识点:1.用思维导图整理所有知识点的树形结构2.关于案例:重要案例写三遍:1.连注释和代码完整抄一遍2.保留注释，去掉代码，尝试写回代码3.全部去掉，自己尝试将注释和代码一起写回3.如何串联:用项目1.多读别人写的项目,标记注释和实现过程2.尝试优化别人的项目1.什么是DOM:JavaScript=ECMAScript(核心语法标准)+DOM(专门操作网页内容的API标准)3天+BOM(专门操作浏览器窗口的API)2天什么是DOM:专门操作网页内容的API标准W3C所有浏览器100%兼容DOM标准实现功能:查找，修改，添加，删除DOM:分2大部分:1.核心DOM:可操作一切结构化文档的API结构化文档:XMLHTMLXML:可自定义标签名称的标记语言比如:Studentsname范冰冰/snamemath89/math/StudentJSON:'{sname:范冰冰,math:89}'HTML:固定标签名称的超文本标记语言优:万能缺:API繁琐2.HTMLDOM:对核心DOM中*部分*API的简化专门用于操作HTML网页的内容优:简单缺:无法完成所有操作实际开发中:优先使用HTMLDOM简化实现功能如果HTMLDOM实现不了的，可用核心DOM补充鄙视题:解释关键词:HTMLXHTMLDHTMLXMLHTML:专门编写网页内容的超文本标记语言XHTML:严格的HTML语言标准DHTML:所有能实现网页动态效果的技术的统称DHTML=HTML+CSS+JSXML:可扩展(自定义标签)的标记语言2.***DOM树什么是DOM树:网页中的所有内容，在内存中，都是以树形结构存储document对象是整棵树的树根其余网页内容中的元素，属性和文本都是document的子节点如何创建:当浏览器窗口获得一段HTML内容时:首先在全局创建document对象，作为树的根节点顺序读取HTML内容中每个元素，文本和属性。。。将每个内容都创建为对应类型的节点对象，挂到父节点下节点对象(Node):网页中的所有内容都是一个节点对象:包括:标签，属性，文本，注释。。。节点对象的父类型都是Node:每个节点都有三大属性:nodeType:节点类型:一个数字ELEMENT_NODE:1ATTRIBUTE_NODE:2TEXT_NODE:3DOCUMENT_NODE:9何时使用:仅判断节点类型时nodeName:节点名:元素节点:标签名——全大写属性节点:属性名文本节点:#textdocument节点:#document何时使用:需要判断元素节点的标签名时nodeValue:节点值:——仅对文本节点和属性节点有效元素节点:null属性节点:属性值文本节点:文本内容document节点:null节点间关系:6种:1.父子关系:parentNodechildNodesfirstChildlastChild2.兄弟关系:previousSiblingnextSibling强调:1.会受所有空字符的影响:换行，Tab，空格也是文本节点***2.childNodes返回一个类数组对象，还是一个动态集合动态集合:只要访问动态集合的内容，都要重新查找DOM优:查询时返回结果的速度快缺:每使用一次都要重复查询DOM，降低了执行效率遍历:for(vari=0;ichildNodes.length;i++)X问题:循环了几次，就重复查找了多少次DOM树解决:for(vari=0,len=childNodes.length;ilen;i++)递归遍历节点树:2步:1.先实现仅遍历直接子节点的方法:2.在方法内，对每个直接子节点执行和父节点完全相同的操作何时使用:只要遍历树形结构，都要使用递归遍历比如:节点树，文件夹结构，人员组织结构原理:深度优先遍历:每次都优先遍历子节点只有当前节点的所有子节点都遍历完，才遍历兄弟节点1.遍历DOM树:节点树:包含了网页中的一起内容节点的树结构元素树:仅包含元素节点的树结构6大关系:1.父子关系:parentElementNodechildren——IE8+firstElementChildlastElementChild2.兄弟关系:previousElementSiblingnextElementSibling不同:元素数不包含文本节点，不会受到空字符的干扰问题:1.兼容性IE9+2.无法获得文本节点遍历API:专门遍历DOM上节点的API：1.NodeIterator:持续访问下一个节点原理:和深度优先遍历顺序完全一样！不同:每次只能访问一个节点对象！如何访问所有:循环，反复调用如何使用:2步:1.创建迭代器对象:variterator=document.createNodeIterator(parent,NodeFilter.SHOW_ALL,null,false.SHOW_ELEMENT);2.调用迭代器对象的API:iterator.nextNode();//返回当前节点，跳到下一个节点如果nextNode()返回null，说明所有子节点都遍历完iterator.previousNode();//跳回上一个节点，输出所在节点优点:没有使用递归，执行效率高！2.TreeWalker：可从当前节点，跳到任意相关的周围节点用法和Iterator完全相同:.nextNode();//跳到下一个位置，并输出下一个节点.previousNode();//返回上一个位置，并的输出上一个节点还扩展出其他API:.parentNode();.firstChild();.lastChild();.previousSibling();.nextSibling();2.查找:1.用html属性查找:除了ById外，都返回动态集合1.按id查找1个元素:varelem=document.getElementByid(id值);每次只找一个元素，如果找不到，返回null2.按标签名查找多个元素:varelems=parent.getElementsByTagName(标签名);特点:1.返回多个元素组成的类数组对象,动态集合如果没找到，返回空数组***2.不仅查找直接子节点，而且查找所有下级节点3.按name属性查找元素:varelems=parent.getElementsByName(name属性值);4.按class属性查找元素：varelems=parent.getElementsByClassName(样式类);2.用css选择器查找:jQuery1.只查找一个符合条件的元素对象:varelem=parent.querySelector(选择器);找不到返回null何时使用:只找第一个符合条件的元素时2.查找所有和选择器匹配的元素:varelems=parent.querySelectorAll(选择器);何时使用:查找多个符合条件的元素时强调:querySelectorAll放回的是非动态集合非动态集合:返回完整的节点对象信息，无需重复查找DOM鄙视题：getXXXXByxxx()vsquerySelectorAll单次查找效率:getXXXByxxx()执行效率更高！因为返回动态集合！querySelectorAll()效率略低!因为返回非动态集合！使用的难易程度:querySelectorAll()更易于使用getXXXByxxx()API更繁琐实际项目中:1.如果一次查找就可得出最终结论，首选get2.超过一次以上的复杂查找，首选querySelectorAll/*****第二天*****/1.修改元素的内容:获取和修改HTML的原始内容:elem.innerHTML获取和修改元素内的纯文本内容(去掉HTML标签):DOMelem.textContentIE8elem.innerText何时使用:希望去掉文本内的标签，只获取文字时希望将特殊符号以正文方式返回课堂练习:如果遍历数组过程中，可能删除数组元素都要从后向前边遍历，边删除。2.获取和修改元素的属性:标准属性:核心DOM:获取:1.获取属性节点:2种:varattr_node=elem.attributes[i\属性名];elem.getAttributeNode(属性名);2.获得属性值:2种:1.先获得属性节点对象,再attr_node.value*2.直接获得属性值:varvalue=elem.getAttribute(属性名);修改:2种:1.先获得属性节点对象，再修改attr_node的value*2.直接设置属性值:elem.setAttribute(属性名,值);强调:凡是从页面获得的或要设置到页面上的属性值都是字符串判断当前元素是否包含指定属性:varbool=elem.hasAttribute(属性名);删除:elem.removeAttribute(属性名);HTMLDOM:强调:HTMLDOM不会将属性当做节点看待所以无法获得属性节点，都是直接获得属性值获取:elem.属性名每个节点对象，在HTMLDOM中都有一个类型与其对应修改:elem.属性名=属性值;class属性:getAttribute(class)elem.classX-和js中所有对象的内部属性class冲突elem.className-访问elem的class属性判断:if(elem.属性名!=)删除:elem.属性名=;自定义属性:只能用核心DOM访问!HTML5:手动添加自定义属性时:data-属性名=属性值在js中添加自定属性:elem.dataset.属性名=属性值读取自定义属性:elem.dataset.属性名课堂练习：获得焦点:一个元素从不可编辑到变为可编辑的状态变化onfocus失去焦点:一个元素从可编辑到变为不可编辑的状态变化onblur1.样式:内联样式:获取内联样式:elem.style.css属性名强调:1.获得的一切样式属性值都是字符串计算前，都要去单位，转为数字在计算。2.style仅能获得内联样式，不包含从样式表中继承或层叠来的外部样式。解决:只要获得最终应用到元素上的计算后的完整样式:***DOM:getComputedStyle(elem).css属性名IE8:elem.currentStyle.css属性名修改内联样式:***elem.style.css属性名=属性值强调:设置长度、大小等数值属性时，必须拼接单位建议优先使用style修改内联样式:优点:1.优先级最高，可直接覆盖外部的css属性2.仅修改当前元素，不影响其他元素删除内联样式:elem.style.css属性名=;css属性名:不带-的属性，保持css中原属性名带-的属性，要去横线，变驼峰：background-color-backgroundColorlist-style-type-listStyleType样式表:HTML-DOMTree↓RanderTree-*layout*-paint↑CSS-CSSRule如何获取样式表中的css属性:COM1.先获得样式表对象:varsheet=document.styleSheets[i]2.获得样式表中指定位置的CSSRule对象:varcssRule=sheet.cssRules[i]3.如果cssRule中不包括内嵌的cssRule就可修改cssRule中的css属性值:cssRule.style.属性名4.如果cssRule中还包含内嵌的cssRule就要进一步获得内嵌的cssRulevarsubRule=cssRule.cssRules[i]修改内嵌rule的属性:subRule.style.属性名/*****第三天*****/正课:1.添加和删除元素:2.HTMLDOM常用对象:SelectTableForm1.添加和删除元素:核心DOM:3步:1.创建新元素对象:vare