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()
js获取节点的DOM操作的更多相关文章
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- react.js 获取真实的DOM节点
为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.crea ...
- Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- js 第二篇 (DOM 操作)
DOM 节点含有:元素节点,属性节点,文本节点. document.getElementById("id") //通过页面元素ID 值 捕获元素对象,得到的值为一个object 1 ...
- JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...
- js,jQuery和DOM操作的总结(二)
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- js,jQuery和DOM操作的总结(一)
废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...
- js获取节点和编辑的方法
创建新节点 1.创建一个DOM片段createDocumentFragment() 例如: var d=document.createDocumentFragment(); d.appendChild ...
- JS中常见原生DOM操作API
摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...
随机推荐
- good books
- Ubuntu 14.04中Mysql中文乱码问题最小化解决
[client]default-character-set=utf8 [mysqld]default-storage-engine=INNODBcharacter-set-server=utf8col ...
- Term_Application
1 CRM(Customer Relationship Management)客户关系管理: (对ERP下游管理不足的补充) 是一个获取.保持和增加可获利客户的方法和过程. 市场营销.销售管理.客户关 ...
- 浅谈SEO-提交(一)
前段时间,花了点时间研究了下SEO,Search Engine Optimization,百度百科这样描述: 中文意译为“搜索引擎优化”.SEO是指通过对网站内部调整优化及站外优化,使网站满足搜索引擎 ...
- 设置ASP.NET页面的运行超时时间详细到单个页面及站点
这篇文章主要介绍了如何设置ASP.NET页面的运行超时时间,包括全局超时时间.单个站点超时时间.单个页面请求超时时间,需要的朋友可以参考下 全局超时时间 服务器上如果有多个网站,希望统一设置一 ...
- Startup key combinations for Intel-based Macs
Learn about the startup key combinations you can use with Intel-based Macs. You can use the followin ...
- java常用加密和解密工具类EncryptUtil.java
package cn.util; import java.io.UnsupportedEncodingException; import java.security.MessageDigest; im ...
- poj1458 Common Subsequence ——最长公共子序列
link:http://poj.org/problem?id=1458 最基础的那种 #include <iostream> #include <cstdio> #includ ...
- LeetCode 【21. Merge Two Sorted Lists】
Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...
- JavaWeb用Jdbc操作MySql数据库(二)
一.仍然使用前面的环境和示例数据库. 二.建立发出注册请求的页面index3.jsp. <%@ page language="java" import="java. ...