Javascript study notes

In my last blog talked about the basic operation of contents for the DOM, this DOM continue to consolidate look for an update, insert, and delete operations.

For HTML parsing the DOM tree, we will certainly be some changes from time to time, adds, changes, deletes the original content in order to facilitate the operation, Javascript in some very useful properties:

A .innerHTML

二 .innerText

Three .textContent

And so on .. we are going to operate that more than a few properties.

For <p id = 'test'> Hello! </ P> because HTML editor, many will add important content ID, then we can modify its content directly with innerHTML property.

Very simple two-step, we can change the content <p> </ p> in.

The first step of course is to get ID.

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

The second step is to change the content.

a.innerHTML = 'OHHH';

a.innerText = 'OHHH';

a.textContent = 'OHHH';

Here there is a focus in innerHTML, innerText, textContent these three attributes, the latter will automatically HTML encode the string, this does not set any HTML tags, so for innerHTML, we can be modified at the contents:

a.innerHTML = 'OHHH <script> alert ( "Lucky!") </ script> <span style =' red '> good! </ span>!' so we carried out a piece of content in addition to plain text. So, to get the string in a network environment, if not the character encoding, it is very vulnerable to XSS attacks.

Then talk about the difference between innerText and textContent properties.

Overall, the difference between the two is innerText not return hidden elements of text, all text textContent return, you will get all the elements such as textContent content such as <script> element and <style> element, while innerText No, I write directly to verify the following code:

<!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>

I found textContent returns:

The innerText returns:

Obviously textContent return to the style element and innerText no.

Having updated DOM, so Here's how to insert DOM.

Two cases, the first node if there is an empty, like <div> </ div> this, there is no content, then we can use directly above innerHTML = '<span> Hello </ span> '

The second case is the node is not empty node,

for

<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>

I want <p id = "waittingInsert"> new-dom </ p> inserted <div id = 'list'> </ div> go, so we can use in several ways:

1. Insert to the end:

var
    newdom = document.getElementById('waittingInsert'),
    list = document.getElementById('list');
list.appendChild(newdom);

After doing so becomes:

<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. Create a new node is inserted directly to the end:

var
    list = document.getElementById('list'),
    newdom = document.createElement('p');
newdom.id = 'waittingInsert';
newdom.innerText = 'new-dom';
list.appendChild(newdom);

As the result of the same case.

3. The node is inserted to the specified position (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);

So that we can before the new node is inserted into the third node.

Becomes this:

<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>

There is the key, when the internal node is not empty Why not use innerHTML to insert nodes, because innerHTML will directly cover all the original node.

Finally say is how to delete a node, and to delete a node is very simple, but also must pay attention to some issues.

To delete a node, we must first obtain the node itself and its parent, then call the parent node removeChild to delete yourself:

Take the contents of the last time we finished the operation is, if I want to delete the fourth element <p id = "third"> third-dom </ p>, we can:

var self = document.getElementById('third');
var parent = self.parentElement;
parent.removeChild(self);

Thus, we removed the list types of Id = 'third' elements.

We can also get direct parent

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

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

Delete the fourth element.

Key:

Although not delete a node after the document tree, but in fact it's in memory can be added at any time again to another location.

When you walk the child nodes of a parent node and delete operations, note that childrenproperty is a read-only attribute, and it will be updated in real time when a child node changes.

To say

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

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

After we removed the third element, and then execute the code, the browser error, because of its length but also changes to follow changes in the elements, that is to say the relative index will change.

OK, operating DOM finally basic get that done, and later dynamically update the node is also very convenient thing, a reminder to pay attention to the security of a web page, after all, some pages can easily be injected into the script of code, resulting in leakage of personal information, so the pages with http or to Oh attention to information security.

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

Javascript study notes three - Operating DOM (b)

Javascript study notes

Guess you like