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 ...
随机推荐
- CTF | bugku | 秋名山车神
''' @Modify Time @Author ------------ ------- 2019/8/31 19:55 laoalo ''' import requests from lxml i ...
- HTML块,含样式的标签
HTML块,含样式的标签 html块 div标签 块元素,表示一块内容,没有具体的语义. span标签 行内元素,表示一行中的一小段内容,没有具体的语义. 含样式和语义的标签 em标签 行内元素,表示 ...
- 详解linux io flush
通过本文你会清楚知道 fsync().fdatasync().sync().O_DIRECT.O_SYNC.REQ_PREFLUSH.REQ_FUA的区别和作用. fsync() fdatasync( ...
- 转 cpu高 问题分析定位
文章来源: http://www.blogjava.net/hankchen/archive/2012/08/09/377735.html 一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原 ...
- [Java] 缓存池
new Integer(123) 与 Integer.valueOf(123) 的区别在于: new Integer(123) 每次都会新建一个对象: Integer.valueOf(123) 会使用 ...
- *arg,**kwargs的参数作用的疑惑
先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '----------- ...
- A Bite Of React(2) Component, Props and State
component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...
- leetcode.双指针.524通过删除字母匹配到字典里最长单词-Java
1. 具体题目 给定一个字符串和一个字符串字典,找到字典里面最长的字符串,该字符串可以通过删除给定字符串的某些字符来得到.如果答案不止一个,返回长度最长且字典顺序最小的字符串.如果答案不存在,则返回空 ...
- [未解决]报错:ssh_exchange_identification: read: Connection reset by peer
报错代码: ssh_exchange_identification: read: Connection reset by peer fatal: 无法读取远程仓库. 请确认您有正确的访问权限并且仓库存 ...
- python2和python3编码
python2编码 unicode:unicode 你好 u'\u4f60\u597d' | | | | encode('utf8')| |decode('utf8') encode('gbk')| ...