JS基础入门篇(二十四)—DOM

2018-06-14 admin

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>

原文链接:https://segmentfault.com/a/1190000015277584

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33999.html

文章标题:JS基础入门篇(二十四)—DOM

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
回到顶部