zoukankan      html  css  js  c++  java
  • 初探JS节点 node

    在使用原生JS获取元素节点的时候发现没有获取成功,想起来应该是获取到了nodeType = 3的文本节点,再次专门记录一下解决过程。

    参考caocx的博客:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            //关于节点的属性:nodeType,nodeName.nodeValue
            //在文档中,任何一个节点都有这三个属性
            //而id,name,value是具体节点的属性
            window.onload = function () {
    //1,元素节点的这三个属性
                var bjNode = document.getElementById("bj");
                alert(bjNode.nodeType);//元素节点:1
                alert(bjNode.nodeName);//节点名:li
                alert(bjNode.nodeValue);//元素节点没有nodeValue属性值:null
    //2,属性节点
                var nameAtr = document.getElementById("name").getAttributeNode("name");
                alert(nameAtr.nodeType);//属性节点:2
                alert(nameAtr.nodeName);//属性节点的节点名:属性名name
                alert(nameAtr.nodeValue);//属性节点的nodeValue属性:属性值username
    //3,文本节点
                var textNode = bjNode.firstChild;
                alert(textNode.nodeType);//文本节点:3
                alert(textNode.nodeName);//节点名:#text
                alert(textNode.nodeValue);//文本节点的nodeValue属性值:文本值本身:北京
    //nodeType、nodeName是只读的
    //而nodeValue是可以被改变的
    //以上三个属性,只有在文本节点中使用nodeValue读写文本时使用最多
            }
        </script>
    </head>
    <body>
    <p>你喜欢那个城市</p>
    <ul id="city">
        <li id="bj" name="BeiJing">北京</li>
        <li>上海</li>
        <li>香格里拉</li>
        <li>天山</li>
    </ul>
    <br><br>
    <p>你喜欢那个游戏</p>
    <ul id="game">
        <li id="rl">贪吃蛇</li>
        <li>搬箱子</li>
        <li>魔兽</li>
        <li>lol</li>
    </ul>
    <br><br>
    name:<input type="text" name="username" id="name" value="你是个傻瓜"/>
    </body>
    </html>
    

        

    <!doctype html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <p>123</p>
    <div id="test"></div>
    
    <script>
    
        window.onload = function () {
    
            var oElem = document.getElementById('test');
            do {
                oElem = oElem.previousSibling;
            } while (oElem && oElem.nodeType != 1);
            console.log(oElem); //=> <p>123</p>
    
        }
    
    </script>
    </body>
    </html>
    

      将获取上一个兄弟元素节点的方法封装成函数:

        function prev(elem) {
            do {
                elem = elem.previousSibling;
            } while (elem && elem.nodeType != 1);
    
            return elem;
        }
    

      

  • 相关阅读:
    [整理]Cadence 生成带有网络追踪的 PDF 原理图
    [整理]FSM 有限状态机
    [原创]Quartus 中调用 Modelsim 波形仿真
    [原创]SPI 协议介绍以及基于 Verilog 的 IP 核实现
    [原创]Verilog 代码编程规范(个人用)
    [算法]线段树
    [算法]tarjan
    poj3280
    poj 3258 River Hopscotch
    [poj 1251]Jungle Roads
  • 原文地址:https://www.cnblogs.com/wangwg1994/p/8764952.html
Copyright © 2011-2022 走看看