08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes;...// 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点 var previous =...; // 父节点元素 var first = test.firstElementChild; // 第一个子节点元素 var last = test.lastElementChile; // 最后一个子节点...注意操作父来控制子必须给子元素赋予一个变量 二.jq $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1")....").prevAll(); // 之前所有兄弟节点 $("#test1").next(); // 下一个兄弟节点 $("#test1").nextAll(); // 之后所有兄弟节点 $("#test1
一、知识要点 1、点击隐藏父节点 2、parentNode 二、源码参考 <!...} li是a的父元素...点击隐藏 li是a的父元素...:;">点击隐藏 li是a的父元素 点击隐藏 li是a的父元素 点击隐藏
2015-08-18 03:48:27 下面介绍JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent...()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children...(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents(),返回下面的所有内容,包括节点和文本。...这个方法和children()的区别就在于,包括空白文本,也会被作为一个 jQuery对象返回,children()则只会返回节点 jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll...(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后的兄弟节点 jQuery.siblings(),返回兄弟姐妹节点
impressionHtml=``; document.getElementById("wrapper").appendChild(impressionHtml); js...向父元素wrapper中的末尾添加 定义好的html,报错: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter...所以js是不能直接传入字符串的,但是jquery的append可以直接传入html字符串。
rowIndex 可以获取 tr 相对于根节点所有 tr 的索引,会计算之前所有的 tr。 ? sectionRowIndex 可以获取 tr 相在当前 table 下的索引。...cellIndex 可以获取 th、td 相对于父节点的索引。 ?
--[if lt IE 9]> <!...中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。...z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序 9.IE6下无法设置1px的行高,原因是由其默认行高引起的 解决办法:为期设置overflow:hidden;或者line-height...中不能操作tr的innerHtml 7.获得DOM节点的父节点、子节点的方式不同 其他浏览器:parentNode parentNode.childNodes IE:parentElement ...ie8 div:hover: >=ie7 inline-block: >=ie8 background-size: >=ie9 圆角: >= ie9 阴影: >= ie9 动画/渐变: >= ie10
document.querySelector("#main"); // var liList = document.querySelectorAll("#main li"); //获取元素节点下的所有子节点...console.log(liList[2].nodeValue);// 空值 因为liList[2]为一个空格 console.log(liList[3].childNodes);//li元素节点下的子节点...:(文本节点,注释节点,子元素节点) 细节:属性节点通过attribute来获取,一般用的不多 浏览器兼容问题:IE8及之前不包含非空文本 children:获取子元素:(元素节点) 浏览器兼容问题:...IE8及之前包含注释节点 我是班长的小迷妹 <!...== parentNode:获取元素的父元素节点 细节:一个元素的父节点一定是一个元素,而不是(文本、注释、属性),只有元素才有子节点 我是班长的小迷妹
:节点的值 标签节点:null 属性节点:属性的值 文本节点:文本内容 3、获取相关节点 3.1、获取父节点和父元素 父节点只能是标签,不能是属性节点和文本节点,所以父节点也是父元素。...dvObj.parentNode); console.log(dvObj.parentElement); parentNode:获取元素的父节点...parentElement:获取元素的父元素。...都支持 2、后面八个,chrome,firefox支持,IE8下,所有获取节点的操作都获取的是元素,所有获取元素的操作都是 undefined。...3.5、总结 获取父子节点和元素的操作,chrome, firefox, IE8 都支持; 获取特殊子节点或者子元素和兄弟节点和元素操作,IE8 中所有的节点操作都是元素操作,所有的元素操作都是 undefined
-向一个父节点中添加一个子节点 整合上面操作的小案例 父节点.insertBefore(新节点,旧节点): 在指定子节点前插入新的子节点 父节点.replaceChild(新节点,旧节点): 使用指定的子节点替换已有的子节点...父节点.removeChild(子节点):删除子节点 使用innerHTML也可以完成DOM的增删改操作 阻止a标签默认行为的常用三种方式 a标签的索引问题 JS修改元素的样式 读取元素的内联样式 获取当前元素显示的样式...属性会获取包括文本节点在内的所有节点,注意DOM标签与标签之间的空白也会被当成文本节点 在IE8一下的浏览器中,不会将空白文本当成子节点,所以该属性再IE8中会返回4个子元素,而其他浏览器都是9个 -...获取当前元素第一个子元素 firstElementChild不支持IE8和一下的浏览器 ---- 抽离出按钮点击函数的小案例 <!...---- document.createTextNode()—创建文本节点 ---- 父节点.appendChild()----向一个父节点中添加一个子节点 ---- 整合上面操作的小案例 <!
今天在调试一个页面的时候遇到一个问题,在IE9下运行得很好的脚本,在IE8里打开的时候弹出错误:expected identifier, string or number,按照经验,应该是定义对象的时候最后一个属性末尾跟了逗号...,但检查一遍后没发现有这种情况,后来仔细看了一下报错的位置,发现有定义json对象属性时,属性名没有用引号括起来,于是加了上去再试,问题解决了。...综上所述,当出现expected identifier, string or number的错误时,你首先应该检查在使用对象字面量时是否在最后一个属性后跟了逗号,这在js新手写的代码中比较常见,如: {
Cookie、LocalStorage 和 IndexDB 无法读取; DOM 和 JS 对象无法获得; Ajax 请求不能发送; ?...浏览器兼容性 目前主流浏览器都已基本提供对 CORS 的支持(IE8、9部分支持...)。 ? 3.3. 交互过程 ? 3.4. 代码示例 ? 3.5....优、缺点 优点: CORS 支持所有类型的 HTTP 请求; 可以用普通的 XMLHttpRequest 发送请求、获得数据,有更好的错误处理。... 跨域 JS 调用 标签常用于 WEB 应用间的界面集成 父子页面间如何进行 JS 交互调用? 父子页面跨域又如何调用? 4.1. 父、子同域 效果: ?...父、子跨域 效果: ? 代码:(父->子) ? 代码:(子->父) ? 5. Nginx 反向代理跨域 鉴于我 Nginx 比较水...就不乱写了...画个图示意一下吧... ? ? 6.
获取当前元素的第一个子节点 元素.lastChild 获取当前元素的最后一个子节点 元素.parentNode 获取当前元素的父元素 元素.previousSibling 获取当前元素的前一个兄弟节点...document.createTextNode() 可以根据文本内容创建一个文本节点对象 父节点.appendChild(子节点) 向父节点中添加指定的子节点 父节点.insertBefore(新节点...,旧节点) 将一个新的节点插入到旧节点的前边 父节点.replaceChild(新节点,旧节点) 使用一个新的节点去替换旧节点 父节点.removeChild(子节点) 删除指定的子节点 推荐方式...,所以这个参数一般都是false IE8及以下的浏览器中没有捕获阶段 # 拖拽 拖拽的流程 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove...,事件对象中还提供了几个属性: altKey ctrlKey shiftKey 这个三个用来判断 alt ctrl 和 shift 是否被按下 如果按下则返回true,否则返回false 设置input
第三个哈哈 第四个 第五个 //ul的父级节点 console.log(my$("uu").parentNode); //ul的父级元素 console.log(my$(..."uu").parentElement); //ul的所有子级节点 console.log(my$("uu").childNodes); //ul的所有的子元素 console.log(...); //某个li的后一个兄弟元素 console.log(my$("three").nextElementSibling); //总结:获取节点的代码,谷歌是获取节点,获取元素的代码,谷歌是获取元素...//但是,到了IE8中,获取节点的代码是获取元素,获取元素的代码,不支持
出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。 即使你的标签是空的,这个标签的高度还是会达到默认的行高。...2、事件处理中非常有用的event属性获得亦不相同,标准浏览器是作为参数带入,而ie是window.event方式获得, 获得目标元素ie为e.srcElement 标准浏览器为e.target 3、...节点的方法有所差异,其获得子节点方法不一致。...来说,各大浏览器之间的差异还是不少的,但是具体我变得这里都不大关注了, 因为我们开发过程中一般都会使用类库,若是不使用,都会自己积累形成一个类库,所以就js而言,兼容性问题基本解决了。...如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame),可以在frame中使用parent来访问父窗口。
但是目前的情况是还有很多人在使用IE6,IE7,IE8。 而IE6,IE7,IE8是不能识别 HTML5 标签的。...实现原理 这些 HTML5 新元素不能被 IE6-8 识别,不能作为父节点包裹子元素,并且不能应用 CSS 样式。...然而微软近期才表态要在 IE 中支持 HTML5,以致到今天为止的 IE8 及以下是无法支持 HTML5 标签的..../js/html5shiv.js"> <!...总结 HTML5Shiv and Respond.js for IE8 support of HTML5 elements and media queries.
结构如下,该元素下包含两个 text 文本,我们只想提取第一个文本内容。 常规的 innertext、textContent 和 outerText 方法只能提取到全部的文本。
想必大家对JavaScript的事件都不陌生吧,大多数在网站开发的时候都会用到,这也是JavaScript的基本功之一,本文就为各位梳理一下相关知识。...及之前版本不支持,IE7、IE8用 attachEvent)。...一般就是一次性将父元素绑定事件,通过判断event.target 来执行相应的方法,后续添加子元素的时候不用再次绑定。...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...(如果只有一个父级)这一个对象进行操作,这样我们就需要一个内存空间就够了,是不是省了很多,自然性能就会更好。
3) 两者的应用场合 通常情况下target和currentTarget是一致的,我们只要使用terget即可,但有一种情况必须区分这三者的关系,那就是在父子嵌套的关系中,父元素绑定了事件,单击了子元素...所有的事件都要经过捕获阶段和处于目标阶段,但是有些事件会跳过冒泡阶段:如,获得输入焦点的focus事件和失去输入焦点的blur事件。 5....阻止事件冒泡和捕获 默认情况下,多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件,不需要执行父元素上注册的事件处理函数,那么我们可以停止捕获和冒泡,避免没有意义的函数调用。...: alert('选择'); break; } } } } 可见,用事件委托就可以只用一次dom操作就能完成所有的效果,比上面的性能肯定是要好一些的 现在讲的都是document加载完成的现有dom节点下的操作...我们可以发现,当用事件委托的时候,根本就不需要去遍历元素的子节点,只需要给父级元素添加事件就好了。这样可以大大的减少dom操作,这才是事件委托的精髓所在。
下面我们将讨论一下内存的管理以及最常见的内存泄露问题。...当然,如果此时检查它的父节点parentNode将会返回null。 也就是说:父节点被清空并不能保证其子节点全部被清除。...IE8以下浏览器的DOM-JS内存泄露 IE8版本以前的浏览器不能够回收DOM对象和JavaScript之间的循环引用。 IE6的SP3版本问题更严重,甚至网页关闭以后仍然不能回收内存。...所以,上文提到的setHandler在IE8以下浏览器中,elem以及其关联的闭包never被回收。....click(function() { }) .appendTo('#data') document.getElementById('data').innerHTML = '' demo 子节点伴随着父节点
领取专属 10元无门槛券
手把手带您无忧上云