马黑黑 发表于 2023-1-31 21:28

JS：遍历父元素

<style>
.chj_code {
        position: relative;
        margin: 10px 0 10px 60px;
        border-left: 2px solid tan;
        font: normal 16px/20px Consolas, Monaco, monospace;
}
.chj_code > p {
        margin: 3px 0 3px 10px;
        position: relative;
        white-space: pre-wrap;
        tab-size: 4;
}
.chj_code > p::before {
        position: absolute;
        width: 40px;
        left: -55px;
        content: attr(data-line);
        text-align: right;
        color: #ccc;
}
</style>

<p>先上代码：<br><br></p>

<div class="chj_code">

<p>&lt;<span style="color:darkred">div</span> <span style="color: red">id</span><span style="color: blue">=</span><span style="color: magenta">"mydiv"</span>&gt;</p>
<p>        &lt;<span style="color:darkred">p</span>&gt;&lt;<span style="color:darkred">span</span> <span style="color: red">id</span><span style="color: blue">=</span><span style="color: magenta">"sp"</span>&gt;&lt;<span style="color: darkred">/span</span>&gt;&lt;<span style="color: darkred">/p</span>&gt;</p>
<p>&lt;<span style="color: darkred">/div</span>&gt;</p>
<p>&lt;<span style="color:darkred">button</span> <span style="color: red">id</span><span style="color: blue">=</span><span style="color: magenta">"btnOk"</span> <span style="color: red">type</span><span style="color: blue">=</span><span style="color: magenta">"button"</span> <span style="color: red">value</span><span style="color: blue">=</span><span style="color: magenta">"find"</span>&gt;按钮&lt;<span style="color: darkred">/button</span>&gt;</p>
<p><br></p>
<p>&lt;script&gt;</p>
<p><span style="color: blue">let</span> ar = [];</p>
<p><span style="color: blue">let</span> findPars = (element) =&gt; {</p>
<p>        <span style="color: blue">let</span> pa = element.parentNode;</p>
<p>        <span style="color: blue">if</span>(pa.nodeName === <span style="color: magenta">'BODY'</span>) <span style="color: blue">return</span>;</p>
<p>        ar.push(pa.nodeName);</p>
<p>        findPars(pa)</p>
<p>}</p>
<p>btnOk.onclick = () =&gt; {</p>
<p>        findPars(sp);</p>
<p>        console.log(ar);</p>
<p>}<br></p>
<p>&lt;/script&gt;</p>

</div>

<p><br>代码解释：HTML部分不多说，说说JS代码。代码里，先设计一个&nbsp;ar&nbsp;数组变量，用来装载遍历到的父元素名称；接着编写一个递归函数 findPars(element)，去俘获&nbsp;element&nbsp;参数（子节点元素）的父元素，用&nbsp;pa&nbsp;变量装载，使用&nbsp;parentNode&nbsp;方法获取。函数中设定一个退出递归出口，就是，如果&nbsp;pa&nbsp;获得的节点名称为&nbsp;BODY，就结束函数的执行，在此之前，则将&nbsp;pa&nbsp;变量所获得的节点的名称（nodeName）存入数组&nbsp;ar&nbsp;中。函数的 findPars(pa)&nbsp;就是调用函数自己，这叫递归调用，其中的参数&nbsp;pa&nbsp;是上面函数执行是获得的某个父节点；最后是按钮点击事件，执行函数&nbsp; findPars(element)，element&nbsp;参数是&nbsp;sp，就是HTML代码中所呈现的那个 &lt;span&gt;&nbsp;标签，并将 ar&nbsp;在控制台打印出来。</p><p><br></p><p>DOM文档节点中，任何一个HTML元素都有元素，通常，我们操作其上的最大父元素是&nbsp;BODY，BODY&nbsp;之上还有&nbsp;HTML。本帖，我们只遍历到&nbsp;BODY&nbsp;之前的所有父节点，不包含 BODY 。</p>

<script>
(function setLineNum() {
        let code_papas = document.querySelectorAll('.chj_code');
        Array.from(code_papas).forEach( (item,key) => {
                let pps = item.children;
                Array.from(pps).forEach( (p,pkey) => {
                        p.setAttribute('data-line', pkey + 1);
                });
        });       
})();
</script>

马黑黑 发表于 2023-1-31 21:30

本帖最后由 马黑黑 于 2023-1-31 21:35 编辑 <br /><br /><div id="mydiv">
        <p><span id="sp"></span></p>
</div>
<button id="btnOk" type="button" value="find">开始获取</button>

<script>
let ar = [];
let findPars = (element) => {
        let pa = element.parentNode;
        if(pa.nodeName === 'BODY') return;
        ar.push(pa.nodeName);
        findPars(pa)

}
btnOk.onclick = () => {
        findPars(sp);
        sp.innerHTML = ar.join('<br>');
        btnOk.disabled = true;
}
</script>

马黑黑 发表于 2023-1-31 21:48

从上面实地获取的结果看，discuz! 确实使用 table 标签的，每一个帖子（包括恢复的）都套着两个 tabel

红影 发表于 2023-1-31 22:02

没看懂{:5_102:}

马黑黑 发表于 2023-1-31 22:43

红影 发表于 2023-1-31 22:02
没看懂

首先要知道HTML文档结构，这个是道理所在，也是理解的关键。最简单的结构如下：

<html>
    <head>
      <title></titel>
    </head>
    <body>
      <!-- 其他代码 -->
      <p>
            <span id="sp"></span>
      </p>
      <!-- 其他代码 -->
    </body>
</html<

上面的 span 标签，以它为起点，往上溯源，一直找到 <body> 处终止寻找。这就能找出这么多。

庶民来了 发表于 2023-2-1 06:10


马黑黑 发表于 2023-2-1 09:32

庶民来了 发表于 2023-2-1 06:10


谢茶

红影 发表于 2023-2-1 11:02

马黑黑 发表于 2023-1-31 22:43
首先要知道HTML文档结构，这个是道理所在，也是理解的关键。最简单的结构如下：




目的就是找出来它的结构？

马黑黑 发表于 2023-2-1 12:51

红影 发表于 2023-2-1 11:02
目的就是找出来它的结构？

其实这个示例，就是懂得找爹地，这很重要，在DOM操作中

红影 发表于 2023-2-1 16:16

马黑黑 发表于 2023-2-1 12:51
其实这个示例，就是懂得找爹地，这很重要，在DOM操作中

得找爹地，这话看得笑{:4_173:}

马黑黑 发表于 2023-2-1 21:58

红影 发表于 2023-2-1 16:16
得找爹地，这话看得笑

它就是这么称呼的。子元素，有时候需要找找父元素是谁，它就是爹地啊；有时候，还要找爷爷。

这种需求，比方讲，我做的播放器插件，我们有约定在先，父元素是 id="papa" 的那个，倘若不约定呢？就需要判定一下了，这时候就用上了。

红影 发表于 2023-2-2 11:55

马黑黑 发表于 2023-2-1 21:58
它就是这么称呼的。子元素，有时候需要找找父元素是谁，它就是爹地啊；有时候，还要找爷爷。

这种需求 ...

哦，可以自动判定的啊。

马黑黑 发表于 2023-2-2 13:26

红影 发表于 2023-2-2 11:55
哦，可以自动判定的啊。

不是自动，是手动写好代码，然后驱动它们去完成这些工作

红影 发表于 2023-2-2 21:17

马黑黑 发表于 2023-2-2 13:26
不是自动，是手动写好代码，然后驱动它们去完成这些工作

这个对我来说有点太深奥了{:4_173:}

马黑黑 发表于 2023-2-2 21:55

红影 发表于 2023-2-2 21:17
这个对我来说有点太深奥了

额，一般般吧

红影 发表于 2023-2-2 22:42

马黑黑 发表于 2023-2-2 21:55
额，一般般吧

我主要不知道把这些都找出来是做什么的。

马黑黑 发表于 2023-2-2 23:13

红影 发表于 2023-2-2 22:42
我主要不知道把这些都找出来是做什么的。

都有用

红影 发表于 2023-2-3 16:37

马黑黑 发表于 2023-2-2 23:13
都有用

那是肯定的啊，否则费劲找它们做什么{:4_173:}

马黑黑 发表于 2023-2-3 17:51

红影 发表于 2023-2-3 16:37
那是肯定的啊，否则费劲找它们做什么

是的
页: [1]
查看完整版本: JS：遍历父元素