1、html css javascript js day04一、DOM 编程DOMDocument Object Model:文档对象模型。DOM是一种与平台无关,与语言无关的技术。提供处理 HTML/XML文档的 API。Node与 ElementNode是一组类型节点的统称,包含有 Document节点、Element 节点、Comment节点、Entity 节点等。Element仅指 HTML/XML标记。如111P节点是一个 Element类型的节点。align是一个 Attr类型的节点。1.2.HTMLDocument继承关系: NodeDocumentHTMLDocument在 HTM
2、LDOM处理中 document节点就是一个HTMLDocument类型的节点。所有 HTML标记在 HTMLDOM中的叫法:HTML?Element3.HTMLElement属性的设置/获取W3C方法-适用 XML/HTMLobject.setAttribute(attr_name,value)string = object.getAttribute(attr_name)HTMLDOM方法 只适用于 HTMLobject.attr_name = valuestring = object.attr_name在使用 HTMLDOM方法处理对象属性时:(1)、大部分 HTML标记的属性即 HTML
3、DOM对象的属性。(2)、如果 HTML标记的属性为合成词,则映射到 HTMLDOM对象后采用“驼峰标记法”命名。(3)、HTML 标记的 class属性映射到 HTMLDOM对象后采用 className属性取代。(因为 class是 JavaScript的预保留关键字)(4)、HTML 标记的 style属性映射到 HTMLDOM对象后object.style.CSS样式 = 值(设置)string = object.style.CSS样式 (获取)样式的写法:如果为单个单词,则直接书写。如果存在“减号”的单词,如 font-size,则将减号去掉后,再采用“驼峰标记法”即可。W3CDOM
4、中规定:所有的文本都存储文本节点内(TextNode)。获取/设置对象的文本 - W3CDOMobject.firstChild.nodeValue = 值;string = object.firstChild.nodeValue;获取/设置对象的文本 - HTMLDOMobject.innerText = valueobject.innerHTML = value (提倡)创建元素节点Element = document.createElement(“tagName“)创建文本节点Text = document.createTextNode(“内容“)添加节点object.appendChi
5、ld()object.insertBefore()删除节点object.removeChild()获取对象document.getElementById() 节点document.getElementsByTagName() 节点集合document.getElementsByName() 节点集合object.getElementsByTagName() 节点集合在整个 HTML文档中,document 对象就代表 HTMLDocument对象,而HTMLDocument又是从 Document对象继承而来,也就是说 Document对象的属性和方法都被 HTMLDocument继承,而 D
6、ocument对象有一个documentElement属性,也就代表 HTMLDocument也有这一个属性所以:document.documentElement而 Document对象的 documentElement属性的返回值是 Element现在:var x = document.documentElement那么,现在的 X就是一个 Element而 Element也是从 Node继承的,而 Node有一个nodeName、nodeType 等属生,也就代表 Element有这些属性,也就代表 X有这些属性。在整个 HTML文档中,document 对象就代表 HTMLDocumen
7、t对象,而HTMLDocument又是从 Document对象继承而来,也就是说 Document对象的属性和方法都被 HTMLDocument继承,而 Document对象有一个documentElement属性,也就代表 HTMLDocument也有这一个属性所以:document.documentElement而 Document对象的 documentElement属性的返回值是 Element现在:var x = document.documentElement那么,现在的 X就是一个 Element而 Element也是从 Node继承的,而 Node有一个nodeName、nodeType 等属生,也就代表 Element有这些属性,也就代表 X有这些属性。