Basic operations of JavaScript-dom

The selector that introduces the dom mainly introduces the search of the dom.

1: increase

Generation of element nodes document.createElement();

        var div=document.createElement('div');

This operation just generates a div object, but it is not placed inside the body.

But it is indeed generated, and it's useless, we just need to insert it into the page.

Generation of text nodes document.createTextNode();

        var text=document.createTextNode('cyl');

Add what you want in it. An insert operation is required.

Generation of comment nodes document.createComment();

In the same way, it is good to add content in and out, but it also needs to be inserted.

Generation of document fragment nodes document.createDocumentFragment();

Insert

parentNode.appendChild();

watch code:

        <div></div>
        <span></span>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        var span=document.getElementsByTagName('span')[0];
        var text=document.createTextNode('cyl');
        span.appendChild(text);
        div.appendChild(span);

Originally, the div span is a side-by-side structure, and there is nothing in the span.

Just drop the generated node into it.

parentNode.insertBefor(a,b);

insert a before b

        <div></div>
        <span></span>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        var span=document.getElementsByTagName('span')[0];
        var text=document.createTextNode('cyl');
        span.appendChild(text);
        div.appendChild(span);
        var span1=document.createElement('span');
        div.insertBefore(span1,span);
        </script>

I continue to generate a span and add it to the front of the span inside the div.

delete

parentNode.removeChild();

In the state just now, continue to operate.

Should have understood.

The upper level calls removeChild(); to delete the corresponding label.

remove();

indeed deleted.

replace

parentNode.replaceChild(new,origin)

replaces the element nodes of its descendants

        <div></div>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        var span=document.createElement('span');
        div.appendChild(span);
        var a=document.createElement('a');
        </script>

Should be simple.

Element properties

1：innerHTML

        <div>
            123
        </div>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        </script>

We directly use the attribute innerHTML to indicate viewing. If you add =, +=, it is to overwrite and add the value.

2innerText||textContent

get text content

        <div>
            <span>123</span>
            <em>456</em>
        </div>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        </script>

There are some differences.

3: View the properties of the added element node

ele.setAttribute(); add

ele.getAttribute(); view

        <div>
            <span>123</span>
            <em>456</em>
        </div>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        </script>

The operation is roughly like this.

Basic operations of JavaScript-dom

Guess you like