<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom节点</title>
<script type="text/javascript">
window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
    // alert(oUl.childNodes.length)    // 7
    // alert(oUl.children.length)// 3  children 实际上是指的元素节点
    var oLi = document.getElementById('two');
    alert(oLi.parentNode)  
    // nodeType 1是指元素节点  3是指文本节点；
    alert(oLi.parentNode.nodeType) //1
    alert(oUl.firstChild.nodeType) //3
    alert(oLi.nextSibling.nodeType)// 3
    alert(oLi.nextElementSibling.nodeType )//  1 不兼容的情况下可以试试nextElementSibling.nodeType，一般情况下是可以的。  
    
 }
</script>
</head>
<body>
    <ul>
        <li>111111</li>
        <li id="two">46343</li>
        <li>3333</li>
    </ul>
</body>
</html>

dom节点相关问题的更多相关文章

  1. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  2. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  3. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  4. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  5. JS 操作Dom节点之样式

    为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...

  6. 原生JSdom节点相关（非原创）

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  7. 第四章 DOM节点操作

    1.什么是DOM:DOM(document object model)文档对象模型,把每一个元素看做是一个节点,然后对节点进行增删改查的操作 2.DOM的分类:(1)Core Dom:可以对html, ...

  8. HTML DOM节点的增删改查

    上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...

  9. DOM节点克隆

    var newDiv = red.cloneNode();document.body.appendChild(newDiv);注意:1.默认只克隆元素本身:设置参数为true,进行深度克隆,可以克隆元 ...

随机推荐

  1. 使用sysbench压测磁盘io

    Ⅰ.sysbench安装 cd /usr/local/src yum -y install make automake libtool pkgconfig libaio-devel git clone ...

  2. day28:hashlib

    1,继续上一小节,讲解双下内置方法,双下getitem,setitem,delitem方法,是对象可以像字典一样的来访问属性 # 普通的字典是像下面这样操作的 dic = {'k' : 'v'} di ...

  3. zrange 复杂度 O(log(N)+M)， N 为有序集的基数，而 M 为结果集的基数

    redis 的 zrange 效率 - 简书 https://www.jianshu.com/p/40a66ff92768 ZRANGE key start stop [WITHSCORES] — R ...

  4. in与exists和not in 与 not exists的区别

    1.in 与 exists: 外表大,用IN:内表大,用EXISTS: 原理: 用in:外表使用了索引,直接作hash连接: 用exists:内表使用了索引,外表作loop循环再进行匹配: 2.not ...

  5. C++20 要来了！

    867 人赞同了该文章 C++的新标准又双叒叕要到来了,是的,C++20要来了! 图片来源:udemy.com 几周前,C++标准委会历史上规模最大的一次会议(180人参会)在美国San Diego召 ...

  6. LG3834 可持久化线段树1

    题意 给定\(N\)个整数构成的序列,将对于指定的闭区间查询其区间内的第\(K\)小值. $n \leq 2 \times 10^5 $ 思路 在\([l,r]\)区间内的数的个数,可以用\(sum[ ...

  7. JavaScript 弹出窗体

    //弹出层 //父页面代码.打开弹窗 function ProDBDisp(link) { var url = _spPageContextInfo.webAbsoluteUrl + link; va ...

  8. windows环境在本地配nginx

    本地搭建了前端项目,但奈何有时候需要https访问的需求,所以做了一个尝试在本地(windows环境)下配置nginx,最终的效果就是 搭建的时候,遇到两个问题: 第一个是如果要在本地搭建https, ...

  9. PS跑马灯效果和更换图标

    最终效果     1.图片修改   跑马灯效果图 Head页面 使用的 IScript_HPDefaultHdr() in WEBLIB_PORTAL.PORTAL_HOMEPAGE 这个页面   一 ...

  10. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...