JS基础入门篇（二十四）—DOM（上）
1.常用的节点类型，nodeType，attributes，childNodes。
1.元素节点 - 1
2.属性节点 - 2
3.文本节点 - 3
4.注释节点 - 8
5.文档节点 - 9
查看节点类型
node.nodeType(返回的是数字)
属性节点
元素.attributes(获取的是集合)
元素.attributes[0]
通过元素.childNodes获取子节点
childNodes 获取到的是一个集合
集合中 包含了 元素的 所有子节点
其中有 元素 子节点 ,注释,文本节点...
举例说明，以下是全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box" class="content">
<div id="inner">inner</div>
一句话
<!--这里是注释-->
</div>
<script>
var box=document.getElementById("box");
console.log(box.nodeType);//1
//--------------------------------------------
console.log(box.attributes);
console.log(box.attributes[0]);//id="box"
console.log(box.attributes[1]);//class="content"
console.log(box.attributes[0].nodeType);//2
//--------------------------------------------
console.log(box.childNodes);
console.log(box.childNodes[0]);//#text 这里指的是box所指的div和inner所指的div换行之间的内容，就是很多个空格，计算机认定为文本。
console.log(box.childNodes[0].nodeType);// 3
console.log(box.childNodes[3].nodeType);// 8
</script>
</body>
</html>2.nodeName
<body>
<div id="box" class="content">
<div id="inner">inner</div>
<p>一句话</p>
<!--这里是注释-->
</div>
<script>
var box = document.getElementById("box");
var p=document.getElementsByTagName("p")[0];
console.log(box.nodeName);//DIV
console.log(p.nodeName);//P
//----------------------------------------------------
console.log(box.childNodes[0].nodeName);//#text
console.log(box.childNodes[5].nodeName);//#comment
//----------------------------------------------------
console.log(document.nodeName);//#document
</script>
</body>3.parentNode,children,childNodes
node.parentNode：找到node的父节点
children：获取节点的一级的元素子节点，只获取元素，返回的是HTMLCollection集合。
childNodes：获取节点的一级子节点，可能获取到元素节点，文本节点，注释节点等，返回的是Nodelist集合.
举例说明，可以把代码粘贴，自己运行看看：
<body>
<!--
node.parentNode 父节点
children 获取节点的一级的元素子节点，返回的是集合
childNodes 获取节点的子节点，可能获取到元素节点，文本节点，注释节点，返回的是集合
-->
<div id="wrap">
<div id="content">
<div id="inner"></div>
</div>
<p>p</p>
一句话
</div>
<script>
var content=document.getElementById("content");
console.log(content.parentNode);
console.log(content.parentNode.parentNode);
console.log(content.parentNode.parentNode.parentNode);
console.log(content.parentNode.parentNode.parentNode.parentNode);
//-----------------------------------------------------------------------
console.log(content.childNodes);//NodeList(3) [text, div#inner, text]
console.log(content.children);//HTMLCollection [div#inner]
</script>
</body>4.node.previousElementSibling和node.nextElementSibling
兄弟关系
node.previousElementSibling 上一个元素兄弟节点
node.nextElementSibling 下一个元素兄弟节点
举例说明，可以把代码粘贴，自己运行看看：
<body>
<ul id="list">
<li>1</li>
<li id="item">2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var list = document.getElementById("list");
var item = document.getElementById("item");
console.log(list.previousElementSibling);//null 因为是嵌套关系，所以没有上一个兄弟节点
console.log(item.previousElementSibling);//<li>1</li>
console.log(item.nextElementSibling);//<li>3</li>
console.log(item.nextElementSibling.nextElementSibling);//<li>4</li>
</script>
</body>5.node.firstElementChild和node.lastElementChild
嵌套关系
node.previousElementSibling 第一个子级
node.nextElementSibling 最后一个子级
举例说明，可以把代码粘贴，自己运行看看：
<body>
<div id="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script>
var wrap = document.getElementById("wrap");
console.log( wrap.firstElementChild );//<div>1</div>
console.log( wrap.lastElementChild );//<div>4</div>
</script>
</body>JS基础入门篇（二十四）—DOM（上）的更多相关文章
- JS基础入门篇（十二）—JSON和Math
1.JSON JSON: 对象格式的字符串 轻量的数据传输格式 注意事项: 键名 需要 使用 双引号 包起来 JOSN有两个方法:JSON.parse和 JSON.stringify. JSON.pa ...
- JS基础入门篇（十八）—日期对象
1.日期对象 日期对象: 通过new Date()就能创建一个日期对象,这个对象中有当前系统时间的所有详细信息. 以下代码可以获取当前时间: <script> var t = new Da ...
- JS基础入门篇（十）— 数组方法
1.join 作用: 将数组通过指定字符拼接成字符串.语法: string arr.join([separator = ',']);参数: separator可选,如果省略的话,默认为一个逗号.如果 ...
- JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- Bootstrap入门（二十四）data属性
Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...
- MyBatis基础入门《二十》动态SQL(foreach)
MyBatis基础入门<二十>动态SQL(foreach) 1. 迭代一个集合,通常用于in条件 2. 属性 > item > index > collection : ...
- JS基础入门篇（二十七）—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- JS基础入门篇（二十四）—DOM（下）
1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...
- JS基础入门篇（三十四）— 面向对象（一）
1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...
随机推荐
- Dllregisterserver调用失败解决方法
在做一个注册com组件时,出现这样的情况 出现这个错误一般是和权限问题有关,命令提示符需要以管理员权限运行才可以注册成功. 最简单的解决方法就是: 在开始菜单右击—>命令提示符(管理员)(A) ...
- gym 101810 M. Greedy Pirate (LCA)
题目:https://codeforc.es/gym/101810/problem/M 题意:给 你一颗树,下面有m次查询,求u->v的最大值是多少,输入两点之间都会有两条边,正边有正权,反边有 ...
- GIT安装包备用地址
如果官网下载被禁止,可在下面这个地址下载,速度飞快 http://www.wmzhe.com/soft-38801.html#download
- 听说你懂个J？——前端发展闲聊
刚好周末和朋友聊起"前端从受鄙视到变得重要"这个话题,感慨前端这四年来的发展,遂有本文. 1. 前情提要 毋庸讳言,在我刚工作的时候,前端是还是一个不受重视的岗位.切图狗,写网页的 ...
- tomcat正常启动输入localhost:8080显示404错误
找了半天才解决. 看这个贴子: https://www.cnblogs.com/lovelanglangyou/p/7410937.html 简而言之: 需要修改eclipse中的server配置,e ...
- 【原】git命令行查看全部分支与远程分支不同步问题
git branch -a 查看全部分支 git fetch 重新拉一下分支
- codeforces 559D Randomizer
题意简述: 在一个格点图中 给定一个凸$n$边形(每个定点均在格点上),随机选择其中一些点构成一个子多边形, 求子多边形的内部点个数的期望. ----------------------------- ...
- MongoDB简单认识
MongoDB 为何物 NoSQL 泛指非关系型数据库,该词是关系型数据库(即 SQL)的相对称呼.MongoDB 是非关系型数据库中较为人熟知的一种. 它拥有很多优秀特性,例如高性能.高可用.支持丰 ...
- 基于spark邮件自动分类
代码放在github上:click me 一.数据说明 数据集为英文语料集,一共包含20种类别的邮件,除了类别soc.religion.christian的邮件数为997以外每个类别的邮件数都是100 ...
- python 装饰器 第七步：带有参数的装饰器
#第七步:带有参数的装饰器 #两个基本函数用同一个装饰器装饰 def outer(arg): print(arg) #这是装饰器的代码 def kuozhan(func): print(func) # ...