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（二）

Javascript学习笔记

猜你喜欢