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 ...
随机推荐
- JSP中获取客户端或浏览端信息的方式
request应用:在JSP页面显示访问者IP 方式一:纯前台,不涉及后台操作.直接在jsp页面中需要显示IP的地方使用 代码:<%=request.getRemoteAddr()%> ...
- LOJ 3093 「BJOI2019」光线——数学+思路
题目:https://loj.ac/problem/3093 考虑经过种种反射,最终射下去的光线总和.往下的光线就是这个总和 * a[ i ] . 比如只有两层的话,设射到第二层的光线是 lst ,那 ...
- 做一个简单的scrapy爬虫
前言: 做一个简单的scrapy爬虫,带大家认识一下创建scrapy的大致流程.我们就抓取扇贝上的单词书,python的高频词汇. 步骤: 一,新建一个工程scrapy_shanbay 二,在工程中中 ...
- 服务器上的 IPProxy代理设置
1.window 平台 CCProxy 安装包 传送门: http://www.xue51.com/soft/2794.html 该页面详细的说明了ccproxy怎么安装.怎么破jie.... 下面老 ...
- 从xxxx检测到有潜在危险的 Request.Form 提示黄页
相信很多朋友都遇到过"从客户端xxxxxx"检测到有潜在危险的 Request.Form 然后给一个黄页提示.然后检测代码又找不到错误的代码提示. 原因:是因为在页面里边使用了富文 ...
- git修改commiter date
GIT: change commit date to author date git filter-branch --env-filter 'export GIT_COMMITTER_DATE=&qu ...
- 公司-IT-Mercari：Mercari 百科
ylbtech-公司-IT-Mercari:Mercari 百科 Mercari是一个日本C2C二手交易平台.拥有针对智能手机的C2C(个人与个人之间的电子商务)二手交易APP,此外还提供针对书籍与C ...
- HTML最全标签
一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD). 标签:a 说明:标明超链接的起始或目的位置. 标签:acronym 说明:标明缩写词. ...
- 【awk】 处理多个文件
处理多个文件: 1. 可以在代码中指定读取某个文件, 其他的用命令行输入 while ( geline < "file.txt" > 0 ) { ...
- C语言博客作业12
一.我学到的内容 二.我的收获 * https://www.cnblogs.com/asd123456/ * 我的收获:通过这一个学期的学习,我一共完成了11次作业,由最开始的第一次作业https:/ ...