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，childNodes、children 它们有什么区别呢？

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

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&…

parentNode parentElement childNodes children

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

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的两个常…

js里用append()和appendChild有什么区别？

parentNode.append()是还在试用期的方法,有兼容问题.是在parendNode节点中最后一个子节点后插入新Node或者DOMString(字符串,插入后为Text节点). 与parentNode.appendChild()的区别在于:parentNode.append()可以同时传入多个节点或字符串,没有返回值:而parentNode.appendChild()只能传一个节点,且不直接支持传字符串(需要parentNode.appendChild(document.createT…

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是否被…

JavaScript 节点操作Dom属性和方法(转)

JavaScript 节点操作Dom属性和方法一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储节点的子节点列表(只读) 3.dataType 返回此节点的数据类型 4.Definition 以DTD或XML模式给出的节点的定义(只读) 5.Doctype 指定文档类型节点(只读) 6.documentElement 返回文档的根元素(可读写) 7.firstChild 返…

JavaScript高级编程II

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中,我们介绍了两类JavaScript小工具及其源代码:浮动文本和弹出菜单.本文中,我们将继续介绍另外几个实用的JavaScript小工具,并着重说明其工作原理,因此你能够简单改动后应用到自己的程序中.本文中的JavaScript代码应该不用做不论什么改动就能够在当前全部主流浏览器上执行.所以,不用再费…

Javascript基础篇小结

转载请声明出处博客原文随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧第一课时入门基础知识点: 操作系统就是个应用程序只要是应用程序都要占用物理内存浏览器本身也是一个应用程序浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变目的:就是用来操作内存中的DOM节点修改DOM节点的属性过javascript语法组织逻辑代码操作DOM BOM(wi…

使用原生 JavaScript 操作 DOM

原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用原生 JavaScript 操作 DOM 了. 文章针对如下几个点进行介绍: 查询修改 DOM. 修改类和特性. 事件监听动画一.查询 DOM 1.1 .querySelector() 使用 CSS 选择器获取元素(一个),是网页中符合查询条件的元素快照,不是即时的. const myEleme…

javascriptDOM节点

DOM把层次中的每一个对象都称之为节点(NODE),以HTML超文本标记语言为例:整个文档的一个根就是<html>,在DOM中可以使用 document.documentElement来访问它,它就是整个节点树的根节点(ROOT) 子节点: 一般意义上的节点,根节点以下最大子节点就是主文档区<body>了,要访问到body标签,在脚本中应该写: document.body body区以内所有的文本及HTML标签都是文档的节点,分别称为文本节点.元素节点(或者叫标签节点),大家知道H…

javascript所有的节点和方法

属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储节点的子节点列表(只读) 3.dataType 返回此节点的数据类型 4.Definition 以DTD或XML模式给出的节点的定义(只读) 5.Doctype 指定文档类型节点(只读) 6.documentElement 返回文档的根元素(可读写) 7.firstChild 返回当前节点的第一个子节点(只读) 8.Implementation 返回XMLDOMImplementation对象 9.las…

javascrip实现：若选中TreeView的父节点checkbox，则其子节点全部选中；子节点全部没选中，则父节点也会没选中。

jacascript DOM节点——节点关系与操作

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标签则表现为一个以特定节点为根节点的树形结构,也就是DOM树.下图为各节点之间的关系: 父级属性 parentNode 和 parentElement 每个节点都有一个 parentNode 属性,该属性指向文档树中的父节点.对于一个节点来…

js 滚轮控制图片缩放大小和拖动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .dragAble { position: relative; cursor: move; } .img-con { position: relative; width: 713px; heigh…

python3之Splash

Splash是一个javascript渲染服务.它是一个带有HTTP API的轻量级Web浏览器,使用Twisted和QT5在Python 3中实现.QT反应器用于使服务完全异步,允许通过QT主循环利用webkit并发.一些Splash功能: 并行处理多个网页获取HTML源代码或截取屏幕截图关闭图像或使用Adblock Plus规则使渲染更快在页面上下文中执行自定义JavaScript 可通过Lua脚本来控制页面的渲染过程在Splash-Jupyter 笔记本中开发Splash Lua脚…

【parentNode和parentElement区别】的更多相关文章