发表于： 2022-12-13 20:18:56
0 170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子节点</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// var box = document.querySelector('.box');
// console.dir(box);
//1、父节点 parentNode
// var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
//得到的是离元素最近的父级节点 如果找不到父节点 就返回为 null
// erweima.parentNode;
// console.log(erweima.parentNode);
// DOM 提供的方法(API) 获取
// var ul = document.querySelector('ul');
// var lis = ul.querySelectorAll('li')
// //1、 子节点 childNodes 得到所以的节点 包含 元素节点 文本节点等等
// console.log(ul.childNodes);
// console.log(ul.childNodes[0].nodeType);
// console.log(ul.childNodes[1].nodeType);
// //2、 children 获取所有的子元素节点 也是我们实际开发常用的
// console.log(ul.children);
var ol = document.querySelector('ol');
//1、firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
console.log('----------------------');
//2、 firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
console.log('----------------------');
//3、实际开发中的写法 既没有兼容性问题又返回第一个元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
</body>
</html>
今天搭建了 xshell环境 ，tomcat环境 ，使用navicat连接数据库。
返回列表
评论