一、获取父级节点

node.parentNode

代码如下（示例）：

<!DOCTYPE html>
<head>父节点操作</head>
<body><div class="box"><span class="hang"></span></div>
</body>
<script>//获取父节点var hang = document.querySelector('.hang');//var box = document.querySelector('.box');var box = hang.parentNode;console.log(box);
</script>
</html>

（1）在控制台可以看到，我们已经获取了span标签的父级节点.box

在这里插入图片描述

（2）需要注意的是node.parentNode只能获取离元素最近的父级节点 (亲父亲)，如果找不到父节点就返回为null

<body><div class="demo"><div class="box"><span class="hang"></span></div></div></body>
<script>//获取父节点var hang = document.querySelector('.hang');//var box = document.querySelector('.box');var box = hang.parentNode;console.log(box);
</script>

我在.box盒子外面再加一层.demo盒子， hang.parentNode获取的依旧是.box这个盒子

在这里插入图片描述

二、获取子节点

1、获取子节点

parentnode.children

代码如下（示例）：

<!DOCTYPE html><head>子节点操作</head><body><div class="demo"><ul><li>01</li><li>02</li><li>03</li><li>04</li></ul></div>
</body>
<script>/*//DOM提供的方法（API）获取var ul = document.querySelector('ul');var lis = ul.querySelectorAll('li');*///获取子节点  var ul = document.querySelector('ul');console.log(ul.children);
</script></html>

在控制台可以看到，我们已经获取了ul标签下的所有小li

在这里插入图片描述

2、获取指定子节点

1、获取第一个子元素节点

parentnode.firstElementChild

2、获取最后一个子元素节点

parentnode.lastElementChild

代码如下：

<script>//获取子节点  var ul = document.querySelector('ul');console.log(ul.firstElementChild);     //获取第一个console.log(ul.lastElementChild);     //获取最后一个
</script>

在这里插入图片描述
（注意：这个方法存在兼容性问题，IE9以上才支持）

3、常用的写法

parentnode.children[i]; //任意一个
parentnode.children[0]; //第一个
parentnode.children[ parentnode.children.length-1]; //最后一个

代码如下：

<script>//获取子节点  var ul = document.querySelector('ul');console.log(ul.children[0]);console.log(ul.children[1]);console.log(ul.children[ul.children.length - 1]);
</script>