JS 节点操作 - 代码天地

JS 节点操作

其他 2018-09-12 04:20:02 阅读次数: 0

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34343637/article/details/82150705

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>节点控制</title>
</head>
<body>
   <div id="div1">
       <span>开玩笑</span>
       <p>天禧年，江湖第一剑客与江湖第一刀客在绝仙涯进行一场决战。此后两人消失于江湖传说</p>
       <ul id="uu">潮湿的味道
           <li>独孤剑圣</li>新校道
           <li id="ll">西门吹雪</li>初日
           <li>天剑</li>
           <li>落叶飞仙</li>
       </ul>
   </div>
   <script type="text/javascript">

       function my$(id){
return document.getElementById(id);
       }
//获取父节点与父元素
/*
       var nodeObject = my$("uu").parentNode; //获取父节点
       var nodeElement = my$("uu").parentElement;//获取父元素

console.log(nodeObject.nodeType+"==========="+nodeObject.nodeName+"======="+nodeObject.nodeValue);
console.log(nodeElement.nodeType+"==========="+nodeElement.nodeName+"======="+nodeElement.nodeValue);
*/

//获取子节点子元素集合
/*
var nodeObject = my$("uu").childNodes; // 获取子节点集合
var nodeElement = my$("uu").children; //获取子元素集合

for (var i = 0; i < nodeObject.length; i++) {
console.log(nodeObject[i].nodeType+"==========="+nodeObject[i].nodeName+"======="+nodeObject[i].nodeValue);
}

for (var i = 0; i < nodeElement.length; i++) {

console.log(nodeElement[i].nodeType+"==========="+nodeElement[i].nodeName+"======="+nodeElement[i].nodeValue);
}
console.log(nodeObject);
console.log(nodeElement);
*/

//获取子节点子元素的第一个与最后一个

// var nodeObject = my$("uu").firstChild;//获取第一个子节点
// var nodeElement = my$("uu").firstElementChild;//获取第第一个子元素
// var nodeObject = my$("div1").lastChild; //获取倒数第一个子节点
// var nodeElement = my$("div1").lastElementChild; //获取倒数第一个子元素

// console.log(nodeObject.nodeType+"==========="+nodeObject.nodeName+"======="+nodeObject.nodeValue);
// console.log(nodeElement.innerHTML);
   // console.log(nodeElement.nodeType+"==========="+nodeElement.nodeName+"======="+nodeElement.nodeValue);

//获取获取前面一个节点以及元素
//
/*
var nodeObject = my$("ll").previousSibling;
// previousSibling//获取倒数第一个子节点
var nodeElement = my$("ll").previousElementSibling;

console.log(nodeObject.nodeType+"==========="+nodeObject.nodeName+"======="+nodeObject.nodeValue);
// console.log(nodeElement.innerHTML);
console.log(nodeElement.nodeType+"==========="+nodeElement.nodeName+"======="+nodeElement.nodeValue);

*/

var nodeObject = my$("ll").nextSibling;
// previousSibling//获取倒数第一个子节点
var nodeElement = my$("ll").nextElementSibling;
console.log(nodeObject.nodeType+"==========="+nodeObject.nodeName+"======="+nodeObject.nodeValue);
console.log(nodeElement.innerHTML);
console.log(nodeElement.nodeType+"==========="+nodeElement.nodeName+"======="+nodeElement.nodeValue);

</script>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_34343637/article/details/82150705

Js节点操作

JS对节点的操作

JS 节点操作

js中的节点操作

节点操作、js事件

Js——节点操作、节点属性操作

【JS学习笔记】JS对节点的操作（父节点，兄弟节点）

JS - 事件 - 节点属性的操作

使用js操作元素节点

【转载】js原生的节点操作

js原生的节点操作API

js中关于节点的操作

JS-DOM节点操作

js Dom之节点操作

JS---DOM节点操作

【js DOM 表单与节点操作】

js--Dom(三)内容节点操作+属性节点操作

js的DOM节点操作：创建，插入，删除，复制，查找节点

JS中的DOM— —节点以及操作

js之DOM操作（删除节点removeChild()）

js之DOM操作（插入节点insertBefore()）

js访问xml之节点操作（转）

js——属性和属性节点样式操作

JS操作子节点移动位置

js--Dom(四) 样式+节点操作

js操作dom元素的子父节点

js DOM节点创建，操作，删除，替换

JS常用的节点操作和方法

JS中节点增减CD操作

JS基础-16-DOM节点操作

今日推荐

TIOBE 5 月榜单：Fortran “复活”进入 Top 10

GCC 14.1 发布

面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」

开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了

中国码农的“35岁魔咒”

蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载

Arc Browser for Windows 1.0 正式 GA

90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！

周排行

Java自定义时间格式

同步整形电路

在开发中最最最常用的字符串的属性大集合

Linux 查看端口占用并杀掉

Java基础四：ArrayList

多线程之死锁就是这么简单

mysql 基础命令集

awk 命令详解

Centos6.3编译安装nginx+php步骤

OCR （Optical Character Recognition，光学字符识别）

每日归档

更多

2024-05-08(42)

2024-05-07(14)

2024-05-06(40)

2024-05-05(0)

2024-05-04(7)

2024-05-03(19)

2024-05-02(0)

2024-05-01(4)

2024-04-30(1)

2024-04-29(40)