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. js中Ajax工作原理(转)

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  2. html([val|fn])

    html([val|fn]) 概述 取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档.直线电机选型 在一个 HTML 文档中, 我们可以使用 .html() 方法 ...

  3. Linux命令行学习日志-ps ax

    当我们需要查询某个运行中的进程的时候,这个命令就显得很有用了,可以查看当前进程的PID和状态(S代表睡眠,SW代表睡眠和等待,R表示运行中) ps ax //查看当前运行中的进程

  4. synchronized的对象锁和类锁

    概念 synchronized 是 Java 中的关键字,是利用锁的机制来实现同步的. 锁机制有如下两种特性: 互斥性:即在同一时间只允许一个线程持有某个对象锁,通过这种特性来实现多线程中的协调机制, ...

  5. js scroll动画

    知识点 1.window.scrollTo (x,y):可以把内容滚动到指定位置  scroll  scroll:卷动意思(书卷)  从上到下移动   1.window.onscroll 窗口滚动事件 ...

  6. linux环境中关闭tomcat，通过shutdown.sh无法彻底关闭--线程池

    最近测试环境上测试的项目通过shutdown.sh始终无法彻底关闭. 之前临时解决方法两种: 第一:通过ps -ef|grep tomcat查看到tomcat的进程直接使用kill来杀死进程. 第二: ...

  7. 打印li索引值

    <ul> <li>这是第一条alert(0)</li> <li>这是第二条alert(1)</li> <li>这是第三条aler ...

  8. 手把手教你把5V的Arduino改造成3.3V版本

    Arduino Pro Mini是基于ATmega328的微控制板,支持5V/3.3V电压.但是我们比较容易买到的是5V供电的版本,有的时候需要用到3.3V版本(比如我们的软控DAC).怎样才能让这款 ...

  9. 8and9 pod控制器

    Pod控制器: 自主定义的pod资源删除后不会被重启,被Pod控制器管理的pod资源被删除后会重启. pod控制器的种类: ReplicationController: (最早使用,现在已经被废弃,太 ...

  10. 利用phpStudy 探针 提权网站服务器

    声明: 本教程仅仅是演示管理员安全意识不强,存在弱口令情况.网站被非法入侵的演示,请勿用于恶意用途! 今天看到论坛有人发布了一个通过这phpStudy 探针 关键字搜索检索提权网址服务器,这个挺简单的 ...