<!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. Service Mesh 数据平面 SOFAMosn

    https://mp.weixin.qq.com/s/DJ_IeDswGGFQiWqJ75pmig 开源 | Service Mesh 数据平面 SOFAMosn 深层揭秘 朵晓东 蚂蚁金服科技 20 ...

  2. HMAC-SHA256 签名方法各个语音的实现方式之前端JavaScriptes6

    sha256和16进制输出,网上很多种后端的验证方法,几乎没有前端的,所以自己写了个,希望给类似需求的人一个帮助,适用场景 腾讯云接口鉴权 v3签名 npm install sha256npm ins ...

  3. leetcode 之 two sum （easy）c++

    1.数组的长度 length() .容器vector长度  size() .容器vector vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库. ...

  4. 美团笔试（web前端)

    分为3部分: 1.逻辑推理.行测.找规律: 2.html css javascript的简单的选择题,以及数据结构,操作系统方面的知识: 3.两道编程题,第一道题关于竞赛报名,有限制的分组,输入N和M ...

  5. 解决No converter found for return value of type: class java.util.ArrayList

    十一月 02, 2018 7:37:44 下午 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() f ...

  6. spring注解：反射与配置

    上图运行结果按下图配置文件中的配置,进行的spring扫描加载.无论是componentScan方式,还是xml配置方式,如果one是实现了一个接口的类,如one_Interface,那么在程序中用o ...

  7. opencart3调用三级菜单level 3 sub categories

    Opencart 3的menu菜单默认只调用一级和二级菜单,但很多电商网站类目复杂,三级菜单一般都是需要的,甚至更深,那么如何调用三级菜单level 3 sub categories呢?ytkah有一 ...

  8. Python---Models 模型

    #Models 模型 数据结构 + 算法 = 程序 ---> URL ---> VIEW ---> Temple ---> DB:分类---关系 Teacher   Stude ...

  9. [svc]简单理解什么是rpc调用?跟restapi有何区别?

    什么是rpc调用 restapi调用方式是对数据的crud. 常见的我们写flash写个api,或者借助django drf写个标准的resetapi,一个url可以借助httpget post pu ...

  10. REDHAT YUM本地源的搭建和使用

    yum源一般分为两种,本地yum源和本地网络yum源,前者是通过文件提供安装包,后者是通过网络下载安装包: 由于Redhat7.3的yum源需要注册付费,所以往往会出现下载yum源安装包失败,如下图: ...