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. 【Android-数据库Sqlite】Sqlite数据库 增、删、改、查

    1.先创建一个Product类 Product.java 变量如下: int id; String code; String name; int qty; 2.创建一个DBHelper类 DBHelp ...

  2. App自动化-python基础

    定义类:类变量.成员变量.局部变量:构造函数.类方法:实例化对象: # -*- coding: utf-8 -*- ''' Created on 2019-6-25 @author: adminstr ...

  3. OFDM时域削峰法降峰均比的原理及影响

    以下是对实验室师兄答疑的转述,经加工后的文字不可避免的存在一些噪声,仅供参考: 时域削峰为非线性变换,效果上相当于将时域中功率较大值的信号点,减去一个合适的“抵消”信号点的功率,使其降低到所设置的门限 ...

  4. kubernetes 存储volume，pv和pvc的使用

    emptyDIR 临时目录 hostPath :使用主机的路径 网络存储: 传统的设备存储:NAS,SAN 分布式存储:glusterfs,rbd,cephfs 云存储:EBS,Azure,阿里云的 ...

  5. @Autowired @Primary @Qualifier

    1 2 3 4 5

  6. java+http文件夹上传

    在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...

  7. 【csp模拟赛3】组合数学

    思路: 先排序,取最大的在剩余左边任意找k-1个数,所以是排列组合,费马小定理求逆元,预处理阶乘,注意要取模.. 代码: #include<cstdio> #include<iost ...

  8. codeforces700B

    CF700B Connecting Universities 题意翻译 树之王国是一个由n-1条双向路连接着n个城镇的国家,任意两个城镇间都是联通的. 在树之王国共有2k所大学坐落于不同的城镇之中. ...

  9. 1.7 JAVA异常总结

    1.7 JAVA异常总结 异常有的是因为用户错误引起,有的是程序错误引起的,还有其它一些是因为物理错误引起的. 三种异常:分别为检查性异常(一般异常).运行时异常(非检查性异常).错误 Throwab ...

  10. 【MyBatis】从一千万记录中批量删除八百万条，耗时4m7s

    批量删除主要借助了MySql的limit函数,其次用了in删除. 代码如下: package com.hy.action; import java.io.Reader; import java.uti ...