Javascript学习笔记

在我的上一个博客讲了对于DOM的基本操作内容，这篇继续巩固一下对于DOM的更新，插入和删除的操作。

对于HTML解析的DOM树来说，我们肯定会时不时对其进行一些更改，在原有的内容上进行增添，修改，删除，为了方便操作，Javascript中有些非常实用的属性：

一.innerHTML

二.innerText

三.textContent

等等..我们接下来要操作的就是以上几种属性。

对于<p id = 'test'>Hello!</p>  因为在HTML的编辑中，许多重要内容会加上ID，那么我们可以直接用innerHTML属性对其内容进行修改。

很简单的两步，我们就可以更改<p></p>中的内容.

第一步当然是先获取ID。

var a = document.getElementById('test'); 或者 var a = document.querySelector('#test');

第二步就是更改内容了。

a.innerHTML = 'OHHH';

或

a.innerText = 'OHHH';

或

a.textContent = 'OHHH';

此处有个重点，在innerHTML,innerText,textContent这三个属性中，后两者会自动对字符串进行HTML编码，这样无法设置任何HTML标签，所以对于innerHTML来说，我们可以修改成一下内容：

a.innerHTML = 'OHHH<script>alert("Lucky!")</script><span style = 'red'>good!</span>!' 这样我们就执行了一段除纯文本之外的内容。所以，在网络环境中获得字符串，如果不进行字符编码的话，是很容易遭受XSS攻击的。

接下来说一下innerText和textContent属性的区别。

整体来说，两者的区别是innerText不返回隐藏元素的文本,而textContent返回所有文本，就比如textContent会获取所有元素内容比如<script>元素和<style>元素，而innerText不会，我直接写了以下代码去验证：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"></meta>

    </head>

    <body>

        <div class="test" id="test">

            I can see you

            <div style="display: none">

                <span>

                    I can't see you

                </span>

            </div>

            <p>

                I can see you , too.

            </p>

        </div>

        <script type="text/javascript">

        var visible = document.getElementById('test');

        //alert("textContent可见："+visible.textContent);

        alert("innerText可见："+visible.innerText);

        //console.log("textContent可见："+visible.textContent);

        //console.log("innerText可见："+visible.innerText);

        </script>

    </body>

</html>

我发现了textContent返回的是：

而innerText返回的是：

很明显textContent返回了style元素 而 innerText 没有。

说完了更新DOM，那么下面来说一下如何插入DOM。

分两种情况，第一种是如果有个空节点，像<div></div>这种，里面是没有内容的，那么我们可以直接用上述的innerHTML = '<span>Hello</span>',

第二种情况是该节点不是空节点，

对于

<p id="waittingInsert">new-dom</p>

<div id="list">

    <p id="first">first-dom</p>

    <p id="second">second-dom</p>

    <p id="third">third-dom</p>

</div>

我要将<p id="waittingInsert">new-dom</p>插入到<div id = 'list'></div>中去，我们可以用这么几种方法：

1.插入到尾端：

var

    newdom = document.getElementById('waittingInsert'),

    list = document.getElementById('list');

list.appendChild(newdom);

这样做之后会变成：

<div id="list">

    <p id="first">first-dom</p>

    <p id="second">second-dom</p>

    <p id="third">third-dom</p>

    <p id="waittingInsert">new-dom</p>

</div>

2.直接创建新节点插入到尾端：

var

    list = document.getElementById('list'),

    newdom = document.createElement('p');

newdom.id = 'waittingInsert';

newdom.innerText = 'new-dom';

list.appendChild(newdom);

结果如上种情况一样。

3.将节点插入到指定位置 （parentElement.insertBefore(newElement, referenceElement);）

var

    list = document.getElementById('list'),

    old = document.getElementById('third-dom'),

    new = document.createElement('p');

new.id = 'waittingInsert';

new.innerText = 'second-dom2';

list.insertBefore(new, old);

这样我们就可以将新节点插入到第三个节点之前。

变成这样：

<div id="list">

    <p id="first">first-dom</p>

    <p id="second">second-dom</p>

    <p id="waittingInsert">second-dom2</p>

    <p id="third">third-dom</p>

</div>

还有个重点就是，当节点内不为空时为什么不能用innerHTML来插入节点，因为innerHTML会直接覆盖所有原节点。

最后说的就是如何去删除一个节点了，删除一个节点是很简单的，但也有些问题必须要注意。

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

就拿我们最后一次操作完的内容来说，假如我要删除第四个元素<p id="third">third-dom</p>，我们可以：

var self = document.getElementById('third');

var parent = self.parentElement;

parent.removeChild(self);

这样，我们就删除了list种Id = ‘third’的元素。

我们也可以直接获得父节点

var parent = document.getElementById('list');

parent.removeChild(list.children[3]);

删除第四个元素。

重点：

删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

就比如说

var parent = document.getElementById('list');

parent.removeChild(list.children[2]);

我们删除了第三个元素之后，再执行上一个代码，浏览器就会报错，因为它的长度也是跟随元素变化而变化的，也就是说索引也会相对变化。

OK，操作DOM终于基本弄完了，以后动态更新节点也是很方便的事情了，提醒一下要注意网页的安全性，毕竟有些网页容易被注入script代码，造成个人信息泄露，所以http开头的网页还是要注意信息安全喔。

------------------------------------------------------------------------

Javascript学习笔记三——操作DOM（二）的更多相关文章

  1. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  2. javascript学习笔记 BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...

  3. 高性能javascript学习笔记系列(3) -DOM编程

    参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...

  4. JavaScript学习05（操作DOM）

    操作DOM DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被结构化为对象树: 通过这个对象模型,Java ...

  5. JavaScript学习笔记系列2:Dom操作(一)

    一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...

  6. JavaScript学习笔记7 之DOM文档对象模型

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  7. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  8. Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注

    4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...

  9. JavaScript学习笔记(三十八) 复制属性继承

    复制属性继承(Inheritance by Copying Properties) 让我们看一下另一个继承模式—复制属性继承(inheritance by copying properties).在这 ...

随机推荐

  1. .net实现浏览器大文件分片上传

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  2. git lfs setpu(4)

    reference: https://packagecloud.io/github/git-lfs/installhttps://zzz.buzz/zh/2016/04/19/the-guide-to ...

  3. 【poj1182】食物链--并查集扩展域

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 109341   Accepted: 33191 Description 动物 ...

  4. 源码安装ROS Melodic Python3 指南 （转） + 安装记录

    这篇文章转自   https://blog.csdn.net/id9502/article/details/80410989  csdn真是作大死,我保存这篇博客的时候还不需要花钱就能看,现在居然要v ...

  5. HDU 4612 Warm up —— （缩点 + 求树的直径）

    题意:一个无向图,问建立一条新边以后桥的最小数量. 分析:缩点以后,找出新图的树的直径,将这两点连接即可. 但是题目有个note:两点之间可能有重边!而用普通的vector保存边的话,用v!=fa的话 ...

  6. 苹果系统OSX中Automator批量重命名

    Automator,看字面意思就无比强大,[自动机器].有什么能比自动还让人着魔? 答案是没有✔ 如果你用的是mac,如果你有一堆文件要重新整理命名,如果你还在Goole什么"批量重命名软件 ...

  7. RecyclerView进阶：使用ItemTouchHelper实现拖拽和侧滑删除

    现在RecyclerView的应用越来越广泛了,不同的应用场景需要其作出不同的改变.有时候我们可能需要实现侧滑删除的功能,比如知乎首页的侧滑删除,又或者长按Item进行拖动与其他Item进行位置的交换 ...

  8. 通过一个name获取tbody下的其他name的值

    <tbody id="add_enterGoods_table">  <tr> <td align="center">< ...

  9. chrome新版本flash无法在http网站上运行的解决办法

    最近遇到一个问题,就是用chrome浏览器打开网站后台以后,使用flash插件上传文件失败,提示flash初始化失败,于是打开chrome的内容设置,准备启用flash功能,打开浏览器,在地址栏中输入 ...

  10. spring + mybatis + mysql/oracle开发

    1)创建一个spring-mybatis-mysql这么一个javaweb或java工程 2)导入spring-ioc,spring-aop,spring-transaction,mybatis,c3 ...