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 ...
随机推荐
- linux设备驱动第三篇：写一个简单的字符设备驱动
在linux设备驱动第一篇:设备驱动程序简介中简单介绍了字符驱动,本篇简单介绍如何写一个简单的字符设备驱动.本篇借鉴LDD中的源码,实现一个与硬件设备无关的字符设备驱动,仅仅操作从内核中分 ...
- Oracle 11g 概述
始于:1970.6月份的一篇论文,IBM研究员埃德加‘考特<大型共享数据库的关系模型>(也是转折点)1977.6月Larry Ellison Bob Miner Ed Oates创办了“软 ...
- 如何为元组中的每个元素命名,提高程序可读性---Python数据结构与算法相关问题与解决技巧
实际案例: 学生信息系统中,数据为固定格式:(名字,年龄,性别,邮箱) ,通常使用元组来存储 使用优点: 使用元组最大的优点在于节省空间,存储相同的数据,使用元组比使用字典,空间小很多 使用缺点: 访 ...
- C# DotNetZip压缩单、多文件以及文件夹
有些项目为了更好的用户体验,会把下载文件做成一个压缩的文件,直接下载,免得去一个个的点击下载文件.网上有很多压缩文件的方法,也有第三方的分装DLL文件,本文主要介绍DotNetZip压缩方法. Dot ...
- Python笔记(一)_基础
数据类型和转换 整型.浮点型.字符串.布尔值 int() 整型转换 float() 浮点型转换 str() 字符串转换 运算符.操作符 算术运算符:+ - * / % // ** 赋值运算 ...
- PAT 2019-3 7-3 Telefraud Detection
Description: Telefraud(电信诈骗) remains a common and persistent problem in our society. In some cases, ...
- KMP算法——字符匹配
暴力匹配: 假设现在我们面临这样一个问题:有一个文本串S,和一个模式串P,现在要查找P在S中的位置,怎么查找呢? 如果用暴力匹配的思路,并假设现在文本串S匹配到 i 位置,模式串P匹配到 j 位置, ...
- idea配置svn正确步骤（下载svn的过程就不写了）
打开----->File------>Settings 2. 3在vcs中选择 4进入此界面 5选择 这样svn就配置好了
- element checkbox 勾选时出现弹框提示。
复选框选中的时候,必须提示是否确定选中,取消勾选的时候也要. 不能解决的思路: 1.element的checkbox只有一个change事件,该事件只返回该选项最新的值(true,false)(不会返 ...
- JQuery通过URL获取图片宽高
var img_url ='https://www.baidu.com/img/bd_logo1.png'; // 创建对象 var img = new Image(); // 改变图片的src im ...