时间:2021-05-18
前言:
html为document搭建了一棵DOM树,这棵树就是有一系列Node节点所构成的。他为我们定义了文档的结构。
Node类型:
Node.ELEMENT_NODE(1); //元素节点较常用
Node.ATTRIBUTE_NODE(2); //属性节点较常用
Node.TEXT_NODE(3); //文本节点较常用
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9); //文档节点较常用
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);
相关函数:
1、取得节点:
document.getElementById('element');
document.getElementsByTagName('element'); 返回类数组对象
document.getElementsByName('element'); 返回类数组对象
document.getElementsByClassName('className') 返回类数组对象,IE7及以下并不支持;
document.querySelectorAll('class' | 'element') 返回类数组对象
2、遍历节点
查找子节点:element.childNodes 返回类数组对象
查找第一个子节点:element.firstChild
查找最后一个子节点:element.lastChild
查找父元素:element.parentNode
查找前一个兄弟元素: element.previousSibling
查找后一个兄弟元素: element.nextSibling
3、获取节点信息
获取元素或者属性节点的标签名称:elementNode.nodeName
获取文本节点的内容: textNode.nodeValue;
获取并设置元素节点的内容(可能会包含HTML标签): elementNode.innerHTML
获取并设置元素节点的纯文本内容:element.innerText(IE) | element.textContent(FF)
获取属性节点的值: attrNode.getAttribute(AttrName);
设置属性节点的值: attrNode.setAttribute(AttrName,AttrValue);
获取节点的类型: node.nodeType;
元素节点: 1;
属性节点: 2;
文本节点: 3;
文档节点: 9;
注释节点: 8;
4、操作节点
创建元素节点: document.createElement('element');
创建文本节点: document.createTextNode('text');
创建属性节点: document.createAttribute('attribute');
删除节点: node.remove();
删除子节点: parentNode.removeChild(childNode);
插入节点: parentNode.appendChild(childNode); //插入到父节点的尾部
parentNode.insertBefore(newNode,existingNode) //插入到已存在节点的前面;
克隆节点: node.cloneNode([true]) //传入true为深度复制
替换节点: parentNode.replaceChild(newNode,oldNode);
相关拓展:
1、由于IE低版本浏览器和其他浏览器在处理DOM中存在不兼容,因此要做一些简单的封装处理。
2、操作DOM元素的样式
以上所述就是本文的全部内容了,希望大家能够喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
基于DOM的Web页面文本提取技术相对成熟,可选择应用工具较多,例如HTMLparser、jsoup、nsoup都是常用的基于DOM的Web页面解析工具,通过对
表格的css控制就先不说了,首先分享下表格常用的DOM表格添加操作的方法常用的为insertRow()和insertCell()方法。row是从零开始计算起的,
在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页对于一个DOM节点node,都有一系列的属性和方法可以使用。常用的有下表。完善
本文实例讲述了JS事件绑定的常用方式。分享给大家供大家参考,具体如下:常用的事件绑定的几种方式有三种:直接在dom元素上进行绑定。用on绑定。用addEvent
想看前面整理的canvas常用API的同学可以点下面:canvas学习之API整理笔记(一)canvas学习之API整理笔记(二)本系列文章涉及的所有代码都将上