js获取节点的DOM操作

一直感觉DOM节点什么的乱七八糟的不能理解，可能博客也没办法写清楚，只能把知道的一些信息大致写下来慢慢再补充了。

HTML DOM类型

Node类型

Javascript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

除IE外其他浏览器都可以访问到这个类型。

每个节点都有一个NodeType属性，用于表明节点的类型，节点类型由在Node类型中定义的下列12个常数值来表示，任何节点类型必居其一。

根据这些常量值可以很容易的判断节点类型。

if(someNode.nodeType == Node.ELEMENT_NODE){//IE无效alert("Node is an element!");
}

if(someNode.nodeType == 1){ //所有浏览器有效alert("Node is an element!");
}

Node.ELEMENT_NODE(1); 元素节点
NOde.ATTRIBUTE_NODE(2); 节点属性
Node.TEXT_NODE(3); 文本节点
Node.CDATA_SECTION_NODE(4); CDATA区域中的内容
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8); 注释的文本节点
Node.DOCUMENT_NODE(9); document节点
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11); document片段
Node.NOTATION_NODE(12);

JS操作DOM节点操作：

添加节点：

appendChild():通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。

复制节点：

cloneNode():复制当前节点，或者复制当前节点以及它的所有子孙节点。

判断是否拥有该节点：

hasChildNodes()：如果当前节点拥有子节点，则将返回true。

插入节点：

insertBefore()：给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。

删除节点：

removeChild()：从文档树中删除并返回指定的子节点。

替换节点：

replaceChild()：从文档树中删除并返回指定的子节点，用另一个节点替换它。

DOCUMENT类型：

查找节点：

getElementById()

getElementByTagName()

getElementByClassName()

转载于:https://www.cnblogs.com/calamus/p/5870332.html

js获取节点的DOM操作相关推荐

js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
innerhtml js执行_JS 中 DOM 操作
封面图片来源:沙沙野内容概览获取元素元素属性 value 属性显示时间计时器节点的增删改查 JS 的 DOM 操作获取元素 <! 运行结果: 2. 元素的属性 <! ...
JS获取节点的兄弟，父级，子级元素
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...
JS性能优化——减少DOM操作次数
DOM操作会导致浏览器重解析,引起重排(回流)和重绘,直接影响页面性能对DOM的操作一般有两种:修改已存在页面上的DOM元素(更改样式),创建插入新的DOM元素这里提出几个方案来减少DOM操作次数 ...
js基础4 使用dom操作/getStyle/scrollHeight/协议滚动禁用例子/div随鼠标移动/冒泡/事件的委派/事件的绑定
使用dom操作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
JS基础知识篇-DOM操作总结
目录 DOM-Document Object Model 文档对象模型第一部分:Dom获取元素第二部分:DOM属性设置与获取第三部分:事件(鼠标事件.键盘事件.表单事件) DOM-Documen ...
js对节点属性的操作
一. 利用节点关系进行获取 1 . 父子关系父节点 parentElement // 获取到父节点 var parent = document.getElementById("parent ...
js练习【DOM操作】
完成效果: 演示地址:http://codepen.io/anon/pen/jPbYWq HTML: <!DOCTYPE html> <html lang="en" ...

js获取节点的DOM操作

js获取节点的DOM操作相关推荐

最新文章

热门文章