parentNode 与parentElement有什么区别

2024-11-05

parentNode parentElement childNodes children

首先要了解 parentNode childNodes是W3C标准的. 一下所说都是针对在html中外加chrome浏览器(请原谅我的渣...) 对于html文档而言,可以理解为能分Node树,Element树,在节点树中是由node组成的,而在Element树中则都是HTMLElement node的包括了Text(文本节点),Comment(注释),HTMLDocument,HTMLElment节点,parentNode childNodes都是在节点树中进行的,也就是他们会包括文本节点和注

parentNode、parentElement，childNodes、children 它们有什么区别呢？

parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的父对象. childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合. children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- pare

parentNode和parentElement区别

parentNode跟parentElement除了前者是w3c标准,后者只ie支持当父节点的nodeType不是1,即不是element节点的话,它的parentElement就会是null 一般情况parentNode可以取代parentElement的所有功能 parentElement匹配的是parent为element的情况,而parentNode匹配的则是parent为node的情况.element是包含在node里的,它的nodeType是1

parentNode，parentElement,offsetParent

offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如: <BODY> <div style="border:1px solid black;position:absolute;"> <form> <input type="checkbox" id="cc"> </form> </div&

javascrip中parentNode和offsetParent之间的区别

首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute.relative.fixed 之一的元素. 在使用 offsetParent 属性获取父级对象时有以下两种情况:

javascript中parentNode,childNodes,children的应用详解

本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中,

DOM中的node与element的区别

先看document的两个常见method. document.createTextNode Constructor: Text document.createElement Constructor: HTML*Element 此处涉及三个DOM API: Text, Node, Element.其关系可参考下图. 由此可见, Node包括Document, Element, CharacterData(Parent of Text, Comment, etc.). 再看看element的两个常

HTML DOM元素的Dragdrop

在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的javascript库(Jquery插件等).在HTML5已经将这一特性引入,提供原生的支持,不用再借助第三方的javascript库.现代化的程序设计中,各种前端库的引入(Jquery, nodejs, ract, angularjs),提高了开发效率,而各自的库也有相应的插件来处理dragdrop,

JavaScript操作DOM的那些坑

js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容. PS:IE 中的所有 DOM 对象都是以 COM 对象的形式实现的,这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异. Node 接口特性/方法类型/返回类型说明 nodeName String 节点的名字:根据节点的类型而定义 nodeValue String

每天刷Web面试题(前10天汇总)

一.算法题部分 1. 如何获取浏览器URL中查询字符串中的参数? function getParamsWithUrl(url) { var args = url.split('?'); if (args[0] === url) { return ""; } var arr = args[1].split('&'); var obj = {}; for ( var i = 0;

撩课-每天刷Web面试题(前10天汇总)-Day12

一.算法题部分 1. 如何获取浏览器URL中查询字符串中的参数 function getParamsWithUrl(url) { var args = url.split('?'); ] === url) { return ""; } ].split('&'); var obj = {}; ; i < arr.length; i++) { var arg = arr[i].split('='); obj[arg[]] = arg[]; } return obj; } va

JavaScript DOM知识（一）

特性.方法类型.返回类型说明 nodeName String 节点的名字:根据节点类型而定义 nodeValue String 节点的值:根据节点的类型而定义 nodeType Number 节点的类型常量值之一 ownerDocument Document 返回元素的根节点 fristChild Node 指向在childNodes列表的第一个节点 lastChild Node 指向在chilidNodes列表的最后一个节点 ChildNodes NodeList 所有子节点的列表 pre

vue2源码分析:patch函数

目录 1.patch函数的脉络 2.类vnode的设计 3.createPatch函数中的辅助函数和patch函数 4.源码运行展示(DEMO) 一.patch函数的脉络首先梳理一下patch函数的脉络. 第一,patch核心函数createPatchFunction, 然后,runtime/index.js中将patch方法挂载到vue的原型属性__patch__上. Vue.prototype.__patch__ = inBrowser ? patch : noop 最后patch的使用是

原生js实现autocomplete插件

在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间,自己动手写写,看一些原生js的东西,根据自己的思路做插件,这样能提高水平. 说到autotemplete,好多人都用过,引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项,类似于百度搜索框那种提示功能,下面就来说说自己的思路. 为输入框添加input事件 input事

python之路十六

一.什么是DOM? 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了. 因此,必须要对DOM有一定的

都别说工资低了，我们来一起写简单的dom选择器吧！

前言我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来没有想过能写这些,所以我们今天一起来试试吧我写的这个很简单,就是最简单的那种了,但是公司师兄写的很好...... 简单dom选择器先上个完整的代码吧,因为我已经写起了: <html xmlns="http://www.w3.org/1999/xhtml"> <head

JS魔法堂：元素克隆、剪切技术研究

一.前言当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新元素.而在部分浏览器中,通过复制来获取新元素的效率比通过 document.createElement 方式的要高一些,具体的性能比较如下: 2% in IE8, but no change in IE6 and IE7 Up to 5.5% in Firefox 3.5 and Safari 4 6% in Opera (but no savin

TreeView htc 改写

call the function loadTree(treeviewId) when body is loaded <body onload="loadTree('tvSelect')"> function loadTree(id) { if (navigator.appName != "Netscape") return; var treeClientId = id; var tree = document.getElementById(id); d

使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test</div><script language="javascript">alert(document.getElementById("myid").innerHTML);</script></body></html&

jQuery学习备忘

jQuery对象转换成DOM对象 var #cr = $("#cr"); //jQuery对象 var cr = $cf[0]; //DOM对象 alert(cr.checked) //检测这个checkbox是否被选中了或者 var #cr = $("#cr"); //jQuery对象 var cr = $cf.get(0); //DOM对象——通过jQuery本身的get(index)方法 alert(cr.checked) //检测这个checkbox是否被

parentNode 与parentElement有什么区别

热门专题