jq获取最后一个子节点_JavaScript(9) webapi操作节点

最新推荐文章于 2022-11-27 01:26:02 发布

VIP文章 weixin_39611506

最新推荐文章于 2022-11-27 01:26:02 发布

阅读量716

点赞数

文章标签： jq获取最后一个子节点

本文链接：https://blog.csdn.net/weixin_39611506/article/details/111619854

版权

为啥要使用节点操作

主要是根据节点之间的关系来更方便的获取元素对象.

例如: 之前写过的点击计数示例, 前面的做法是使用 querySelector 获取两个 input 标签, 再进行操作.

但是两个 input 标签其实是兄弟关系, 咱们可以借助节点操作, 更方便的获取到 input 的元素对象.

 <input type="text" id="text" value="0"><input type="button" id="btn" value='点我+1'><script>    var text = document.querySelector('#text');    var btn = document.querySelector('#btn');    btn.onclick = function () {
            var num = +text.value;        console.log(num);        num++;        text.value = num;    }script>

核心关系: 父子, 兄弟.

页面中的一切内容都是节点

文本, 元素, 属性等都是节点.

每个节点对象主要有三个属性:

节点名称 (nodeName)
节点类型 (nodeType): 元素节点为 1, 属性节点为 2, 文本节点为 3(文字, 空格, 换行都算文本节点) , 开发中主要操作元素节点.
节点值 (nodeValue)

 <div class="box">div><script>    var div = document.querySelector('.box');    console.dir(div);script>

获取父节点

体会 HTML 中的父子关系

 <html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>父子关系title>head><body>    <div class="grandfather">        <div class="father">            <div class="son">div>        div>    div>body>html>

在这个 html 中:

html 是 head 和 body 的父节点.
head 是 meta, title 的父节点.
body 是 .grandfather 的父节点.
.grandfather 是 .father 的父节点.
.father 是 .son 的父节点.

使用 parentNode 属性获取到该节点的父节点.

 <div class="grandfather">    <div class="father">        <div class="son">div>    div>div><script>    var son = document.querySelector('.son');    console.log(son);    console.log(son.parentNode);    console.log(son.parentNode.parentNode);script>

获取所有子节点

1) 使用 childNodes 属性获取到该节点的子节点

 <ul>    <li>1li>    <li>2li>    <li>3li>ul><script>    var ul = document.querySelector('ul');    console.log(ul.childNodes);script>

注意! 结果是 NodeList 类型, 得到的是 "节点", 而不是 "元素" (节点的范围比元素更广)

第一个 li 和 ul 之间存在换行.

最后一个 li 和 ul 之间存在换行.

li 和 li 之间也存在换行.

这些换行也都是节点(文本节点).

如果想只获取元素节点, 可以手动写个函数, 把 type 为 1 的节点保留下来.

 function getElementNode(nodeList) {
        var result = [];    for

最低0.47元/天解锁文章

weixin_39611506

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq获取最后一个子节点_JavaScript(9) webapi操作节点

为啥要使用节点操作主要是根据节点之间的关系来更方便的获取元素对象.例如: 之前写过的点击计数示例, 前面的做法是使用 querySelector 获取两个 input 标签, 再进行操作.但是两个 input 标签其实是兄弟关系, 咱们可以借助节点操作, 更方便的获取到 input 的元素对象.<input type="text" id="text" value="0">&...
复制链接

扫一扫