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!");   
}

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402979.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git合并代码冲突

场景:多人共同更改同一文件代码时候,可能回引发代码冲突。此时需要选择某一方或者双方代码进行合并。 采用当前更改:就是保留本地修改。 采用传入的更改:就是选择线上已有的覆盖更改。 保留双方更改:就是两份都保存。

[转]T4模版引擎之基础入门

本文转自:http://www.cnblogs.com/lzrabbit/archive/2012/07/15/2591085.html 额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外&#x…

请问WCF 跟 WebService之间异同

From: http://tommyhu.cn/wcf-WebService-qu-bie/ 问题: WCF与 Web Service的区别是什么? 和ASP.NET Web Service有什么关系? WCF与ASP.NET Web Service的区别是什么? 这是很多.NET开发人员容易搞错的问题。面试的时候也经常遇到…

报错 Cannot read properties of undefined (reading ‘ajax‘); Cannot read property ‘ajax‘ of undefined

jQuery中使用ajax发送请求,报错 Cannot read properties of undefined (reading ajax); Cannot read property ajax of undefined 错误代码 $.ajax({type:"POST",url:"pageServlet",data:jsonData,dataType:"json",succe…

「初步」Spring与commons的BeanUtil.copyProperties

2019独角兽企业重金招聘Python工程师标准>>> ###org.apache.commons.beanutils.BeanUtils 的是 public static void copyProperties(Object dest, Object orig) throws###org.​springframework.​beans.​BeanUtils 的是 public static void copyProperties(Object…

WCF技术剖析之十一:异步操作在WCF中的应用(上篇)

From: http://www.cnblogs.com/artech/archive/2009/07/08/1519423.html 按照操作执行所需的资源类型,我们可以将操作分为CPU绑定型(CPU Bound)操作和I/O绑定型(I/O Bound)操作。对于前者,操作的执行主要利…

react自适应布局

在 React 中实现自适应布局可以通过使用 CSS 的弹性布局&#xff08;Flexbox&#xff09;或者栅格系统来实现。下面是使用 Flexbox 实现简单的自适应布局的示例&#xff1a; jsx import React from react; import ./App.css; const App () > { return ( <div cl…

vue2使用vant组件库;使用rem后vant组件样式变小了。

vue2使用vant组件库 文章目录vue2使用vant组件库一、vant是什么&#xff1f;二、使用步骤1.引入vant2库2.引入 自动按需引入组件3.在main.js中按需引入组件&#xff08;推荐&#xff09;4.或者只是在某个index.vue内使用&#xff08;推荐&#xff09;5.在main.js中导入所以组件…

EditPlus自定义模板

直接用图表达了,不详之处可以留言. 1.查看帮助中的关于,确定文本编辑器的版本是否一致 2.如图 3.如图 4.这个test.html 需要事先编辑并拷贝到EditPlus的安装目录 5.新建空白html 时,效果如下: 6.方便大家,代码贴上来. html> <head> <title>网页标题…

《大道至简》第一章

Begin //开始叙述 if 你不知道编程是什么 { 简而化之&#xff0c;编程的精义精华在于三种算法&#xff1a;顺序、选择、循环&#xff0c;在论述的愚公移山的故事中&#xff0c;首先&#xff0c;“惩山北之塞&#xff0c;出入之迂”是原始需求的产生&#xff1b;然后“聚室而谋曰…

利用反射获得类的public static/const成员的值

首先&#xff0c;我们定义一个类&#xff1a; class CDynamic{ #if truepublic const string TableName "p_battlerecord"; // OK//public static string TableName "p_battlerecord"; // OK #elsepublic static string TableName // 用属性不行{ge…

vue项目部署测试和生产环境地址

场景&#xff1a;直接本地dev开发项目代码&#xff0c;然后打包提交&#xff0c;将打包后的index.html和static等静态文件&#xff0c;复制一份到本地桌面。 git切换到test分支下&#xff0c;将刚才打包的index.html和static等静态文件直接丢进test的某个文件例如abc文件夹下&a…

每日英语:Go Ahead, Hit the Snooze Button

Turns out a good nights rest is good for business. snooze&#xff1a;小睡&#xff0c;打盹One-third of American workers arent sleeping enough to function at peak levels, and that chronic exhaustion is costing billions of dollars in lost productivity, accord…

wireshark如何抓取本机包

From: http://www.cnblogs.com/lvdongjie/p/6110183.html 在进行通信开发的过程中&#xff0c;我们往往会把本机既作为客户端又作为服务器端来调试代码&#xff0c;使得本机自己和自己通信。但是wireshark此时是无法抓取到数据包的&#xff0c;需要通过简单的设置才可以。 具体…

vue页面使用html2canvas截图;vue使用canvas画布签名

vue页面使用html2canvas截图 vue使用vue-esign画布签名

如何用css将超出部分变成...

通过css控制超出部分变成...比通过javascript截取字符串效率要高得多而且也更简单 不多说&#xff0c;看例子 <html> <body> <style> .ellipsis span { white-space:nowrap; text-overflow:ellipsis; /* for internet explorer */ overflow:hidden;…

【Android】Android开发启动app弹出一张广告图片,Dialog可以查看大图,查看某个图片功能...

作者&#xff1a;程序员小冰&#xff0c;GitHub主页&#xff1a;https://github.com/QQ986945193 新浪微博&#xff1a;http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现的效果图&#xff1a; 首先说一下&#xff0c;这里利用的是一个dialog&#xff0c;然…

el-dialog弹框中img图片保持比例最大化;图片保持比例最大化

图片保持比例最大化 <el-dialog :visible.sync"dialogVisible" center class"look_img_dia"><img width"100%" :src"dialogImageUrl" alt"" /></el-dialog>.look_img_dia {/deep/.el-dialog {margin-top…

Wireshark技巧-过滤规则和显示规则

From: http://www.cnblogs.com/icez/p/3973873.html Wireshark是一个强大的网络协议分析软件&#xff0c;最重要的它是免费软件。 过滤规则 只抓取符合条件的包&#xff0c;在Wireshark通过winpacp抓包时可以过滤掉不符合条件的包&#xff0c;提高我们的分析效率。 如果要填写过…

正则表达式及扩展

正则表达式&#xff1a; 正则表达式是对字符串操作的一种逻辑公式&#xff0c;就是用事先定义好的一些特定字符、及这些特定字符的组合&#xff0c;组成一个“规则字符串”&#xff0c;这个“规则字符串”用来表达对字符串的一种过滤逻辑。给定一个正则表达式和另一个字符串&am…