1.DOM
1.1:W3c制定的xml文档解析标准;
1.2:是关于节点的文档树,一个节点只能有一个父节点,DOM内一切都是节点。
1.3:根节点是document,DOM与平台无关。
2.节点
2.1:文档节点(根节点)——document
2.2:文档类型节点——documentType——没有子节点
2.3:元素节点——element——可包含子节点
2.4:文本节点——text——普通文本,没有子节点。
2.5:属性——attr——NamedNodeMap
2.5.1:class是JavaScript的关键字,class属性的功能用className替代。
2.5.2:根据属性找标签顺序——先id在name属性;先在标签内部找,再到外部标签找。
2.5.3:IEBug——不同标签的id和class属性的值不能相同。
2.5.4:属性3部曲——节点访问属性;GET/SET访问属性;运算符访问属性(推介)。
2.6:注释——comment——不能有子节点
2.
2.
*所有节点通用的部分属性——nodeName、nodeValue、nodeType;ownerDocument;
*nodeType——元素、属性、文本、CDDATA、注释、文档、文档类型 (节点类型值:从1到10)
*nodeList——length属性获得数组长度;childNodes[i]可以获得单个子节点,而childNodes.item(i)较正规。
*NamedNodeMap——属性的键值对,
3.节点的操作
3.1:定位(查)
3.1.1:firstChild
3.1.2:nextSibling
3.1.3:previousSibling
3.1.4:lastChild
3.1.5:childNodes
3.1.6:hasChildNodes()
3.1.7:getNamedItem(nodeName)——
3.1.8:getElementsByTagName(tagName)——按标签名找节点
3.1.9:getElementsByName(nameValue)——按属性name=nameValue找节点
3.1.10:getElementById(idValue)——按id定位单个节点。
*在不知道是否还有子节点有哪些子节点时,hasChildNodes+childNodes的组合很强大。
3.2:增
3.2.1:appendChild()——尾部追加
3.2.2:insertBefore(new,old)
3.2.3:创建节点——createElement(tagName)、createAttribute(attName)、createTextNode(text)、createComment(text)、createDocumentFragment()——功能类似于缓存;cloneNode(Boolean)——创建一个节点对象 ,TRUE克隆自身及其下节点;FALSE仅克隆自身。
3.3:删
3.3.1:removeChild()
3.4:改
3.4.1:replaceChild(new,old)
3.5:table——动态创建的表格IE需要table才可见,DOM不需要,也可见。
3.5:innerHTML不是DOM的标准由IE提出,被公认。
*innerHTML将当前节点下的所有节点输出;将参数字符串转化为节点(写)。
*outerHTML将当前节点和其上面的节点输出(读)。
*innerText将文本作为文本输出。
4.样式的控制【IE——DOM】
*【属性与HTML/CSS一样——属性由多词组成是,需要满足驼峰命名法】
4.1:嵌入标签
4.2:内联——css的所有样式表存放在集合document.styleSheets中。
*disabled、href、ownerNode(DOM)、type、parentStyleSheet
*获得单个style节点里选择器的集合【rules——cssRules】——selectorText获得选择器名;
*var oCSSRules=document.styleSheets[0].cssRules||document.stylesheets[0].rules
4.3:外联
4.4:最终样式——最后在屏幕上显示的样式。
【标签.currentStyle.属性——document.defaultView.getComputedStyle(查看的标签,null.属性)】只读
*【IE——DOM】多词组合:驼峰命名法——HTML/CSS的属性
分享到:
相关推荐
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
JavaScript_——DOM总结.txt
问:如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表: 答: Var tables = document.getElementsByTagName("table"); alert("This document contains contains"+tables.length+"tables");
javascript——PDF教程大合集 1、100个直接可以拿来用的JavaScript实用功能代码片段 2、JavaScript DOM编程艺术(中文) 3、JavaScript高级程序设计(第3版)中文 高清 完整 4、JavaScript脚本特效编程给力起飞 5、...
网页模板——javascript(DOM)图片切换效果
可能是类似[“雅虎军规”](https://developer.yahoo.com/performance/rules.html?guccounter=1)和[《高性能 JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作,也可能是搜索引擎聚合...
010302_XML解析 —— DOM 010303_XML解析 —— SAX 010304_XML解析 —— JDOM 010305_XML解析 —— DOM4J 010306_使用JavaScript操作DOM 010401_Tomcat服务器的安装及配置 020501_注释及Scriptlet 020502_page指令 ...
JavaScript_——DOM总结,word文档,很好的资源!!!!
3.1 DOM不是JavaScript,它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 创建示例文档 3.3.1 创建DOM...
javascript DOM Html 对象对象参考手册
3.1 DOM不是JavaScript,它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 创建示例文档 3.3.1 创建DOM...
3.1 DOM不是JavaScript,它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 创建示例文档 3.3.1 创建DOM...
javascript中的高阶部分,是window对象的使用,而windows对象使用与Dom密切相关,了解它的层次模型显得很重要
javascript dom 操作神器,初级程序员必备,迅速提高js
前端学习(六)——javascript学习笔记(四)HTML DOM.xmind
只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。 例子 当你点击发送的时候,表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是,mac版的IE和...
javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Model),文档对象模型。 是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口;W3C已经定义了一系列...