JS操作DOM元素的子父事件

最新推荐文章于 2024-05-29 21:52:44 发布

莓莓儿～

最新推荐文章于 2024-05-29 21:52:44 发布

阅读量1.2k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/fanfan_h/article/details/90611989

版权

JS 专栏收录该内容

49 篇文章 9 订阅

订阅专栏

js获取子节点的方式

通过获取dom方式直接获取子节点
father 为父元素的id的值，div为标签的名字。返回一个数组
var a = document.getElementById(“father”).getElementsByTagName(“div”);

<body>
<div id="father">
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    var a=document.getElementById("father").getElementsByTagName ("div");
    console.log(a);  //HTMLCollection(3) [div, div, div]
</script>
</body>

通过childNodes获取子节点
使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。
console.log(ul_menu.childNodes); // [text, li, text, li#list, text, li, text, li, text]
nodeName:节点名称（大写字母）
nodeType:节点类型元素类型为1,符号类型为3
nodeValue:元素节点的nodeValue返回的是null

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>子父节点</title>
</head>
<body>
<ul id="menu">
    <li>西瓜</li>
    <li>苹果</li>
    <li id="list">香蕉</li>
    <li>樱桃</li>
</ul>
<script>
    //获取元素
    var ul_menu=document.getElementById ("menu");
//获取所有的节点childNodes  集合类型
    console.log(ul_menu.childNodes); // [text, li, text, li#list, text, li, text, li, text]
    console.log(ul_menu.childNodes[0]);//回车符号
    //nodeType  当前节点的类型  元素的类型是1
    console.log(ul_menu.childNodes[0].nodeType);// 符号的类型是 ：3
    console.log(ul_menu.childNodes[1].nodeType);// 元素的类型是 ：1
    //nodeName 节点名称  大写 --tolowercase
    console.log(ul_menu.childNodes[1].nodeName );//LI
    //nodevalue  节点的值
    console.log(ul_menu.childNodes[1].nodeValue );//null

childElementCount 获取子节点个数

    var count=ul_menu.childElementCount;
    console.log(count); // 4

通过children来获取子节点
利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

  //获取子元素
    console.log(ul_menu.children);  // [li, li, li, li]

获取同胞兄弟元素
（1）获取下一个节点 nextSibling
（2）获取下一个元素 nextElementSibling
（3）获取上一个节点 previousSibling
（4）获取上一个元素 previousElementSibling
获取父元素里面的第一个或者最后一个
（1）firstChild 第一个节点（可能为回车符号）
（2）firstElementChild 第一个元素
（3）lastElementChild 最后一个元素
（4）lastChild 最后一个节点（可能为回车符号）

<body>
<ul id="menu">
    <li>西瓜</li>
    <li>苹果</li>
    <li id="list">香蕉</li>
    <li>樱桃</li>
    <li>草莓</li>
</ul>
<script>
//获取同胞兄弟元素
    var listt=document.getElementById ("list");
     //获取下一个节点
     console.log(listt.nextSibling); //回车符号  #text
     //获取下一个元素
     console.log(listt.nextElementSibling);  //<li>樱桃</li>
     //获取上一个节点
     console.log(listt.previousSibling );  //回车符号  #text
     //获取上一个元素
     console.log(listt.previousElementSibling);  //<li>苹果/li>

     //获取父元素里面的第一个或者最后一个
     //firstChild  第一个节点
     console.log(ul_menu.firstChild);  //回车符号  #text
     //firstElementChild 第一个元素
     console.log(ul_menu.firstElementChild);   //<li>西瓜/li>
     //lastElementChild 最后一个元素
     console.log(ul_menu.lastElementChild); //<li>草莓/li>
     //lastChild  最后一个节点
     console.log(ul_menu.lastChild);  //回车符号  #text

6 .createElement : 创建元素
7. appendChild：元素追加子元素 , 追加到当前元素的内容之后
（1） appendChild() 方法向节点添加最后一个子节点。
（2）使用 appendChild() 方法从一个元素向另一个元素中移动元素。

<body>
<script>
//createElement :创建元素
     var mi=document.createElement("li");
     mi.innerHTML ="芒果";   //里面的内容
     mi.id ="mini";   //设置的Id
      ul_menu.appendChild(mi);
</script>

莓莓儿～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS操作DOM元素的子父事件

js获取子节点的方式通过获取dom方式直接获取子节点father 为父元素的id的值，div为标签的名字。返回一个数组var a = document.getElementById(“father”).getElementsByTagName(“div”);<body><div id="father"> <div></div>...
复制链接

扫一扫