DOM--(Node)
来源:互联网 发布:淘宝游戏账号交易 编辑:程序博客网 时间:2024/06/06 06:46
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口),它描绘了一个层次化的节点树。
Node类型
1. Node.ELEMENT_NODE 元素节点2. Node.ATTRIBUTE_NODE 属性节点3. Node.TEXT_NODE 文本节点4. Node.CDATA_SECTION_NODE CDATA节点(只针对XML文档,表示CDATA区域)5. Node.ENTITY_REFERENCE_NODE 实体引用名称节点6. Node.ENTITY_NODE 实体名称节点7. Node.PROCESSING_INSTRUCTION_NODE 处理指令节点8. Node.COMMENT_NODE 注释节点9. Node.DOCUMENT_NODE 文档节点10. Node.DOCUMENT_TYPE_NODE 文档类型节点11. Node.DOCUMENT_FRAGMENT_NODE 文档片段节点12. Node.NOTATION_NODE DTD声明节点
【属性】
• nodeType 与数值(1-12)比较• nodeName 返回元素的标签名• nodeValue • childList (firefox3.6+ & chrome) 操作类名的方法 - X.childList.add(类名) - X.childList.contains(类名) - X.childList.remove(类名) - X.childList.toggle(类名) 如果存在,删除;如果不存在,添加• childElementCount 返回子元素个数(不包含文本节点和注释节点)• firstElementChild 返回第一个元素(firstChild元素版)• lastElementChild 返回最后一个元素(lastChild元素版)• previousElementSibilng 返回前辈元素(previousSibling元素版)• nextElementSibling 返回后辈元素 (nextSibling元素版)• 自定义属性 (加上前缀data,比如data-xx,使用时dataset.xx) (firefox6+ & chrome)• innerHTML (写入时会改变DOM子树)读取时返回or替换所有子节点,写入后会替换原来所以子节点(不支持inner HTML的元素:col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot、tr)• innerText(写入时会改变DOM子树,永远只会生成当前元素的一个子文本节点)读取时,将文档树的所有文本拼接起来;写入时,删除元素的所有子节点,插入文本不支持innerText属性的浏览器可以使用textContent属性。textContent还会返回行内样式和行内脚本代码,innerText则会忽略行内样式和行内脚本。• outerHTML (写入时会改变DOM子树)读取时返回or替换调用它的元素及其所有子节点,写入后替换元素x的整个DOM树• outerText (不常用)读取时,与innerText结果一样;写入时,新的文本节点会完全替换整个元素• insertAdjacentHTML(插入位置,要插入的HTML文本) 插入位置四种值 - beforebegin 在当前元素前插入同胞元素 - afterbegin 在当前元素下插入新的子元素/在第一个子元素前插入新的子元素 - beforeend 在当前元素下插入新的子元素/在最后一个子元素后插入新的子元素 - afterend 在当前元素后插入同胞元素
!使用innerHTML、outerHTML、insertAdjacentHTML前,要手工删除被替换元素的所有事件处理程序和js对象属性,不然会导致内存占用问题。当插入大量新HTML标记,使用这三个方法比多次使用DOM操作先创建节点再指定关系相比,效率要高得多。使用时,先单独构建字符串,最后再一次性把结果字符串赋给innerHTML
【关系】
每个节点都有一个childNodes属性,其中保留着一个NodeList对象(类数组,保存一组有序的节点,它基于DOM结构动态变化,可用方括号或item()访问其中的节点)x.children 元素只包含元素子节点 x.childNodes可能还包含空白符
每个节点都有一个parentNode属性,指向文档树的父节点。包含在childNodes列表中的所有节点有相同的父节点。
X.parentNode
包含在childNodes列表中的每个节点,相互间为同胞节点
X.previousSibling (第一个节点的previousSibling为null)X.nextSibling (最后一个节点的nextSibling为null)
其他关系
X.firstChildX.lastChildX.ownerDocument 指向表示整个文档的文档节点
【方法】
• 判断是否有子节点 x.hasChildNodes() //返回true/false• 在childNodes列表最后增加新节点x.appendChild(新节点) //返回新节点• 在childNodes列表中,在参照节点前,插入新节点 x.insertBefore(新节点,参照节点) //返回新节点• 在childNodes列表中替换节点x.replaceChild(新节点,被替换节点) //返回被替换的节点• 移除childNodes列表中的节点x.removeChild(被移除的节点) //返回被移除的节点• 复制节点副本 ○ 深复制(复制节点&其子节点树) x.cloneNode(true) ○ 浅复制(只复制节点本身) x.cloneNode(false)?深复制和浅复制区别: 深复制:(递归)结果副本与原本指向两个不同的内存地址 浅复制:结果副本与原本指向同一个内存地址• 处理文档树中的文本节点(删除不包含文本的文本节点、合并相邻的文本节点)X.normalize()• 滚动元素的容器时,元素出现在视口中X.scrollIntoView() • 滚动元素容器,元素出现。当alignCenter为true时,元素显示在视口中部X.scrollIntoViewIfNeeded(alignCenter) • 将元素内容滚动指定的行高X.scrollByLines(行高) • 将元素内容滚动指定的页面高度X.scrollByPages(页面高度) • 确定节点xx是否为节点x的后代 x.contains(xx) 返回true/false• 确定节点间的关系,返回表示关系的位掩码 x.compareDocumentPosition(xx) 1:无关 2:xx居前 4:xx局后 8:xx包含x 16:xx被x包含
阅读全文
0 0
- DOM--(Node)
- dom-node
- html dom 中removeChild(node)
- DOM笔记(二):Node接口
- DOM节点层次(Node类型)
- DOM的核心: Node
- htm,dom,node
- DOM Node Element Attr
- Query DOM node value
- DOM的核心: Node
- XML DOM Node Types
- HTML DOM Node Information
- XML DOM - Node 对象
- DOM之Node
- 了解DOM:Node接口
- XML DOM Node 对象
- dom系列:Node操作
- 【DOM】node类型
- MUI 连接wifif打印机并打印
- datepicker 增加选择年月及自定义到某个月份
- set https on Jenkins
- oracle数据库建立、登录及表空间与用户的建立与授权
- Altium Designer16 精心总结
- DOM--(Node)
- JAVA启动参数大全之一:标准参数
- MyBatis SQL xml处理小于号与大于号
- Jupyter Notebook 的快捷键
- 欢迎您在新浪博客安家
- 简单Makefile编写
- algorithm chapter8 8.15
- 455. Assign Cookies给小孩分配饼干
- 今天开始写零散的学习经验(还是放…