A, node,

  1. Text node, Internet Explorer 8 below the space node is not available.
  2. Element nodesdiv.
  3. An attribute nodeclass,id,value.
  4. Comment node
<div id="wrap">
    <div class="position">
        <div id="box" class="box1" data-title="This is also the node" abc="133">
            <! -- <div> <img src="1.jpg" /> </div> -->How are you!!<span id="my-span">This is a span</span>
            <p>This is a P tag</p>
            <ul>
                <li>This is li tag 1</li>
                <li>This is li tag 2</li>
                <li>This is li tag 3</li>
            </ul>
        </div>
        <div id="box2"></div>
    </div>
</div>
Copy the code

2. Obtain nodes

  1. Get the child node (dynamic get).ele.childNodes: text node, element node.ele.children: Gets only element nodes.
  2. Gets the first child node.ele.firstChild: returns the first containing text node and comment node.ele.firstElementChild: Gets the first element node.
  3. Gets the last child node.ele.lastChild: Gets the text and comment nodes.ele.lastElementChild: Gets the last element node.
  4. Gets the parent node.ele.parentNode: Gets the parent node.ele.offsetParent: Finds the location parent.
  5. Next sibling node.ele.nextSibling: Gets the next node, including text and comment nodes.ele.nextElementSibling: Gets only element nodes.
  6. Last sibling node.ele.previousSibling: Gets the next node, including text and comment nodes.ele.previousElementSibling: Gets only element nodes.
  7. Gets the number of child element nodes.ele.childElementCount.

3. Node operations

  1. Create a node:document.createElement('nodename'), put the label name, create the element node, create the node is the document method, create the node can be directly dom operation.
  2. Create a text node:createTextNode.
  3. Deleting a node:parentNode.removeChild(node), a node can be deleted only from the parent node, but cannot be deleted itself.
  4. Clone node:cloneNode(), clone only clones the element itself and element nodes, no clone events, can accept a Boolean type, if true, clone descendant elements.
  5. Adding a node:parentNode.appendChild(node), can only be added from the parent node, after the last child node.
  6. Replace nodes:parentNode.replaceChild(new, old), the first replaces the new element, and the second replaces the element.
  7. Add a node before a node:parentNode.insertBefore(new, old), the first to insert the new element, and the second to insert before the element.
var oBox = document.getElementById('box'),
    oSpan = document.getElementById('my-span');
    oBox.onclick = function(){
        alert(1)}var oBox2 = oBox.cloneNode(true);
    wrap.appendChild(oBox2);
    console.log(oBox2)
Copy the code
var oP = document.createElement('p');
oP.innerHTML = 'I'm a P tag';

oP.onclick = function() {
    alert('I'm the click event for the P tag')
}
oBox.appendChild(oP);
		
var oText = document.createTextNode('I'm fine!! ');
oBox.appendChild(oText);
console.log(oText)
Copy the code

4. Node attributes

  1. Gets node properties.ele.getAttribute(key), node name, return value directly.ele.getAttributeNode, returns the node object.
  2. Example Set node properties.ele.setAttribute(key, value)Don’t use numbers as keys.ele.setAttributeNode(node), node is a node object.
  3. Create a node object.document.createAttribute("nodeName")After creating, set the value value.
  4. Example Delete a node object.ele.removeAttribute(key)
  5. Node type. 1–element– element node, 3–#text– text node, 8–#comment– comment node, 9–document– document node
  6. TagName is only available on element nodes and nodeName is available on all nodes.
var oBox = document.getElementById('box');
oBox.removeAttribute('abc');
console.log(document.nodeType);
Copy the code