js演示文稿04-JavaScript第四章DOM

第四章DOM对象,主讲:罗弟华mail:12500791,DOM,学习内容：什么是DOM？DOM的结构模型DOM常用属性DOM常用方法,DOM案例,我们要运用DOM技术完成一个游戏：“星星点点”该游戏可升级为更具挑战性的看你能坚持多久游戏：即页面会自动生成星星，但点击星星又可以删除该星星。则如果页面中小星星数目达到20就算游戏结束。当然在期间需要计时，看谁坚持的时间长。,DOM,什么是domDocumentObjectModel（文档对象模型）为HTML、XML文件的操作提供了API。它提供了文件的结构表述。是建立网页与Script程序语言沟通的桥梁。,DOM节点与层次,例如一个(x)html文档:modelnoodlefishsugar,DOM的结构模型分析,Html元素有两个子元素：和（它们是兄弟关系）Head元素有1个子元素:title元素有一个子元素：modelBody元素有1个子元素：有3个子元素都是每个li又分别有1个子元素：noodle、fish、sugar。,DOM节点引入,XHTML文档中的每个成分都是一个节点。DOM是这样规定的：整个文档是一个文档节点每个XHTML标签是一个元素节点包含在XHTML元素中的文本是文本节点每一个XHTML属性是一个属性节点注释属于注释节点,元素节点,、等元素称为元素节点元素节点可以包含其他节点获取元素节点可以用:document.getElementById(“idname”)document.getElementsByName(“name”)注意：getElementsByName(name),保证兼容性,只用于表单document.getElementsByTagName(“tagname”),文本节点,例子中元素中包含着文本“model”，model就是一个文本节点。在XHTML文档中，文本节点总是被包含在元素节点的内部。,属性节点,有些元素节点会有一些属性（如img上的src属性），则在DOM中就叫做属性节点，用以对元素做更具体的描述中的src=“123.jpg”就是一个属性节点获取属性可以用两种方法：element.getAttribute(“属性名”);element.属性名;/element代表某个元素节点更改属性也可以用两种方法：element.setAttribute(“属性名”，属性值);Element.属性名=属性值;,属性节点,获取一个元素的所有属性节点element.attributes;其结果是一个数组，可以通过数组下标访问各个属性，获取属性值nodeValue获取属性类型nodeType获取属性名称nodeName,varobj1=document.getElementById(n1);varattr=obj1.attributes;alert(attr0.nodeType);/实际上，属性节点的属性类型都是2alert(attr0.nodeName);alert(attr0.nodeValue);,DOM的节点关系示意图,DOM常用属性,documentElement：该文档的根节点范例：rootNode=xmldoc.documentElementchildNodes：该节点的所有非属性的子节点的集合范例：FirstNode=Element.childNodes(0);firstChild：该节点的第一个非属性的子节点范例：FirstChildNode=Element.firstChild;lastChild：该节点的最后一个非属性的子节点范例：LastChildNode=Element.lastChild;,DOM常用属性,nextSibling：与本节点位于同一层级且同父的下一个节点范例：NextElement=Element.nextSibling;parentNode：该节点的父节点（不适用于属性节点）范例：ParentElement=Element.parentNode;previousSibling：与本节点位于同一层级且同父的前一个节点范例：PreviousElement=Element.previousSibling;,DOM常用属性,nodeName：节点的名称（对元素节点和属性节点有效）范例：ElementName=Element.nodeName;nodeType：表示该节点类型的数值码范例：NodeTypeCode=Node.nodeType;注意：nodeType的返回结果是一个数字，其含义为：1代表元素节点，2代表属性节点，3代表文本节点nodeValue：该节点的值（对属性节点和文本节点有效）范例：AttributeValue=Attribute.nodeValue;注意：元素节点，返回null；属性节点，返回属性的值。文本节点，返回文本节点的内容。,DOM常用方法,获得属性设置属性判断节点创建节点克隆节点添加节点删除节点替换节点,属性,获得属性getAttribute(属性名)设置属性setAttribute(属性名,值);,设置样式属性：Element.style.background=“red”;设置元素类（class）属性：Element.className=“className”;,DOM,判断某节点是否包含子节点：hasChildNodes()用来检查给定元素是否有子节点，返回结果为bool值varbooleanValue=element.hasChildNodes(),创建节点,createElement(标签名)建立一个指定名称的元素。范例：varn=document.createElement(div)createTextNode(字符串)建立一个新的text节点范例：varn=document.createTextNode(“23.9”);,添加节点,appendChild(oNode)追加一个子节点（作为最后的子结点）范例：parentNode.appendChild(newnode)insertBefore在一个父节点中的某子节点前插入一个新的子节点范例：parentNode.insertBefore(newC,refC);说明：newC表示要插入的新节点，refC表示要插入其之前的现有节点,克隆节点,cloneNode()为给定节点创建一个副本，参数为true或false，true表示同时复制该节点的子节点，false则不复制任何子节点。范例：varref=node.cloneNode(true),删除节点,removeChild()将从一个给定元素里删除一个子节点pNode.removeChild(node),替换节点,replaceChild()把给定父元素里的一个子节点替换为另外一个节点parentNode.replaceChild(newChild,oldChild),给节点设置html内容,innerHTML给节点添加html代码该方法不是w3c的标准，但是主流浏览器支持parentNode.innerHTML(“要显示内容”);,JS操作css,使用js操作css属性的写法是有一定的规律的：对于没有中划线的css属性一般直接使用style.属性名即可。如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position等。对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。,Dom案例2-图片放大突出显示,如右图所示：上图为初始状态下图为鼠标放上去后当然鼠标离开后又恢复,JS操作样式与属性的两个特例,对于元素的属性（如)，其在js中的一般访问方法是：obj.属性名；