js-Dom

brief introduction

DOM：Document Object Model

node

HTML Everything in the document is a node

• The whole document is a document node
• Every HTML An element is an element node
• HTML The text within the element is a text node
• Every HTML Attributes are attribute nodes
• Annotations are annotation nodes

document object

Common properties

name	say bright
referrer	Returns the ****URL
URL	Returns the ****URL

document.referrer
document.URL

document Common methods

name	say bright
getElementById()	Return to have specified id Reference to the first object of
getElementsByName()	Returns a collection of objects with the specified name
getElementsByTagName()	Returns a collection of objects with the specified label name
write()	Write text to document 、HTML Expression or JavaScript Code

Properties of a node

The attribute name	describe
parentNode	Return the parent of the node
childNodes	Returns the collection of child nodes ,childNodes[i]
firstChild	Returns the first child of the node , The most common use is to access the text node of the element
lastChild	Returns the last child of the node
nextSibling	Next node
previousSibling	Last node

var obj=document.getElementById("news");
    var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
    var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
    var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
    alert(str);

element attribute

The attribute name	describe
firstElementChild	Returns the first child of the node , The most common use is to access the text node of the element
lastElementChild	Returns the last child of the node
nextElementSibling	Next node
previousElementSibling	Last node

Node information

 var nodes=document.getElementById("nodeList");
    var type1=nodes.firstChild.nodeType;
    var type2=nodes.firstChild.firstChild.nodeType;
    var name1=nodes.firstChild.firstChild.nodeName;
    var str=nodes.firstChild.firstChild.nodeValue;
    var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
    document.getElementById("nodeList").nextSibling.innerHTML=con;

Operation node

Manipulate the properties of the node

name	describe
getAttribute(“ Property name ”)	Get attribute value
setAttribute(“ Property name ”,“ Property value ”)	Setting property values

  var ele=document.getElementsByName("book");
        var img=document.getElementById("image");
        if(ele[0].checked){
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt"," I survived with the dog ");
            img.nextSibling.innerHTML=" I survived with the dog ";
        }
        else if(ele[1].checked){
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt"," What if the haze comes ");
            img.nextSibling.innerHTML=" What if the haze comes ";
        }

Create and insert nodes

name	describe
createElement( tagName)	Create a tag named tagName New element node of
A.appendChild( B)	hold B Nodes are added to A End of node
insertBefore( A,B )	hold A The node is inserted into B Before the node
cloneNode(deep)	Copy a specified node

  var ele=document.getElementsByName("book");
        var bName=document.getElementsByTagName("div")[0];
        if(ele[0].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt"," I survived with the dog ");
            bName.appendChild(img);
        }
        else if(ele[1].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt"," What if the haze comes ");
            img.setAttribute("onclick","copyNode()")
            bName.appendChild(img);

Delete and replace nodes

name	describe
removeChild( node)	Delete the specified node
replaceChild( newNode, oldNode) attribute attr	Replace the specified node with another node

var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);

var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);

Operation node style

change style attribute

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

change className attribute

 document.getElementById("cart").className="cartOver";
 document.getElementById("cartList").className="cartListOver";

Get the style of the element

document.getElementById("cartList").display
document.getElementById("cartList").currentStyle.display