浅谈js的html元素的父节点,子节点

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持

示例：

"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ，如下：

<div id="parent">
<b id="child">My text</b>
</div>

在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementById() 方法获取粗体元素并且想知道它"爹"是谁, 返回的信息将是一个 div. 演示下面的脚本如下：

<script type="text/javascript">
<!--

alert(document.getElementById"child").parentNode.nodeName);

//-->
</script>

用 parentNode 不一定只找到一个"爹", "儿子"也可以成为"爹", 如下面的例子 ...

<div id="parent">
<div id="childparent">
<b id="child">My text</b>
</div>
</div>

上面这段代码中有两个"爹"和两个"孩子". 头一个 div ( id "parent") 是第二个 div (childparent) 的"爹".   在 "childparent" 中有个粗体元素(id "child"), 是 "childparent" div 的"孩子". 那么, 如何访问到"爷爷" (id "parent")?如下：

<script type="text/javascript">
<!--

alert(document.getElementById("child").parentNode.parentNode.nodeName);

//-->
</script>

注意到两个 parentNode 连用了吗? "parentNode.parentNode". 第一个 parentNode 是 div ( id "childparent"), 因为我们要得到最外层的父元素, 所以另外加了一个 parentNode 就到了 div ( id "parent").

使用 parentNode 不只找到某个元素的 nodeName, 还会更多. 例如, 你可以获取包含大量元素的父节点, 并在末尾添加一个新的节点.   IE 有它自己的名称叫做 "parentElement", 对于交叉浏览器脚本建议使用 parentNode

以上这篇浅谈js的html元素的父节点,子节点就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript 获取元素在父节点中的下标(推荐)

    jQuery中直接通过$(this).index()即可得到当前元素的下标.但原生JavaScript并没有提供类似的属性或方法,这时候可以调用数组中的indexOf方法直接计算 <ul> <li>hello</li> <li>hello</li> <li id="mts">hello</li> <li>hello</li> </ul> var elt=documen

  • JS获取父节点方法

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):        1. 通过顶层document节点获取:            (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已

  • 关于extjs treepanel复选框选中父节点与子节点的问题

    关于extjs treepanel复选框选中父节点与子节点的问题

     extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点.取消所有子节点时,才能取消根节点. 复制代码 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:new Ext.tree.AsyncTreeNode({}), listeners:{ "checkchange": f

  • javascript下查找父节点的简单方法

    <div>        <a href="#">标题</a>        <ul id="demo">            <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                <ul>                 

  • javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

  • js查找父节点的简单方法

    <div>         <a href="#">标题</a>         <ul id="demo">             <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                 <ul>             

  • 浅谈js的html元素的父节点,子节点

    parentNode和parentElement功能一样,childNodes和children功能一样.但是parentNode和childNodes是符合W3C标准的,可以说比较通用.而另外两个只是IE支持,不是标准,Firefox就不支持 示例: "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ,如下: <div id="parent"> <b id="child

  • 浅谈js中子页面父页面方法 变量相互调用

    (1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名 window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 例如:想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById(&q

  • 浅谈js数组splice删除某个元素爬坑

    先来看下几个概念: // splice:返回从原始数组中删除的项(如果没有任何删除,则返回空数组) // 当指定2个参数时,表示删除 // 当指定3个参数,且第2个参数为0时表示插入 // 当指定3个参数,且第2个参数为1时表示替换 本次就拿删除举例,本身我们想删除数组中的某个指定元素,我们需要知道它所在数组中的下标,我们可以用 数组.indexOf获取它所在的下标,然后拿splice删除这个元素. 本身是没问题 代码如下: var arr = ["张三","李四"

  • 浅谈JS读取DOM对象(标签)的自定义属性

    DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: <div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为tes

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • 浅谈js的解析顺序 作用域 严格模式

    一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. alert(a); var a = 1; 如果执行顺序是从上到下的,在上面弹出一个a,浏览器会认为从上到下执行的,那么当它alert(a)的时候,他就会发现没有这个东西,那么他就会报错,但是实际上他弹出来的结果是undefined.返回值是undefined说明a没有被定义也就是没有赋值.下面我来讲解一下javascript的解析顺序. 1.ES5中有声明意义的关键字

  • 浅谈JS之iframe中的窗口

    1.window.self 对当前窗口自身的引用;self,window.self,window三者是等价的 2.window.top 对顶层窗口的引用,如果本身就是顶层窗口,则返回本身 3.window.parent 对父窗口的引用,如果没有父窗口,则返回本身 以上这篇浅谈JS之iframe中的窗口就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 浅谈JS之tagNaem和nodeName

    nodeName是节点的属性,tagName是元素的属性.元素是节点的子集.不是任何节点都有tagName的,比如文本节点,仅有nodeName属性. 这个和css中的倾斜和斜体的关系是一样的.不是所有元素都有斜体的,但是都能倾斜. 以上这篇浅谈JS之tagNaem和nodeName就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 浅谈js数组和splice的用法

    首先添加一个splice函数: splice:该方法的作用就是从数组中删除一个元素 array.splice(index,count,value....); index:表示从哪一个下标开始, count:表示删除元素的个数 value:代表增加的元素 example: 1.var array = new Array(1,2,3,4,5,6); array.splice(0,1,2) result:2,2,3,4,5 2.var array = new Array(1,2,3,4,5,6); a

  • 浅谈js对象的创建和对6种继承模式的理解和遐想

    JS中总共有六种继承模式,包括原型链.借用构造函数.组合继承.原型式继承寄生式继承和寄生组合式继承.为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述. 很长的一个故事,姑且起个名字叫女娲造人吧. 创建对象 女娲一个一个的捏人(创建对象),这样太慢,于是设计了一种机器(函数),想造什么样的,告诉他这个人有哪些特点和功能,机器来制造.这就是工厂模式的(使用同一个接口创建对象,回产生大量重复代码,由此发明了一种函数(模具)). 但是机器造人同样也比较麻烦(挖土.和泥.捏眼睛.捏鼻子...

随机推荐