Read javascript advanced programming 10-DOM

Read javascript advanced programming 10-DOM
The childNodes attribute of an element indicates all its subnodes. It is a NodeList object and will dynamically change with the DOM structure. HasChildNodes (): Indicates whether a subnode exists. Var headlines = document. getElementById ("headline_block"); var childs = headlines. childNodes; childs. length; // 1 childs [0]; // obtain the first child node childs. item (0); // take the first child node parentNode: point to the parent node in its DOM tree; previussibling: adjacent brother node before the current node; nextSibling: adjacent sibling node next to the current node. Var li1 = childs [0]. childNodes [2]; li1.previussibling; li1.nextSibling; 2. node operation 1. appendChild (): append a node to the end of the childNodes node of the node. If the input node is already its child node, it will be moved to the end. Var headlines = document. getElementById ("headline_block"); var ul = headlines. childNodes [0]; var firstnode = ul. firstChildul. appendChild (firstnode); ImageImage (1) 2. insertBefore (newnode, somenode): Insert a subnode to a specified position. The first parameter is the node to be inserted, and the second parameter is the node for reference. Var headlines = document. getElementById ("headline_block"); var ul = headlines. childNodes [0]; var firstnode = ul. firstChild; ul. insertBefore (firstnode, ul. childNodes [2]); Image (2) 3. replaceChild (newnode, oldnode): replaces a node. The first parameter is the new node to be inserted, and the second parameter is the node to be replaced. 4. removeChild (somenode): removes the specified node from the node. Var headlines = document. getElementById ("headline_block"); var ul = headlines. childNodes [0]; ul. removeChild (ul. childNodes [0]); Image (3) Common Node types III. Document Type (nodeType = 9) 1. basic attribute nodeType = 9 nodeName = "# document" document.doc umentElement: point to the html element on the page; document. body: point to the body element. 2. document Information: document. title: obtains or modifies the page title. The modified page is displayed on the browser tab, but the <title> element is not modified. Document. title; // "blog garden-developer's online home" document. title = "blog garden-Xiaojing"; document. URL: displays the complete URL of the page. Document. referrer: the complete address of the Source Page. Document. domain: the domain Name of the page. This attribute can be set. However, pay attention to the following points: you cannot set the domain name to a domain that is not included in the current domain name; you cannot set a loose domain to a tight domain; cross-origin communication: due to cross-origin security restrictions, javascript communication cannot be performed between pages without domain. By setting the document. domain of the two pages to the same value, you can access each other's javascript objects. For example, copy the code document on the flash homepage of the blog Park. URL; // "http://home.cnblogs.com/ing/" document. referrer; // "http://www.cnblogs.com/" document. domain; // "home.cnblogs.com" document. domain = "www.baidu.com"; // error document. domain = "cnblogs.com"; // you can document. domain = "home.cnblogs.com"; // error document. domain; // "cnblogs.com" Copy code 3. special Collection document. anchors: <a> signature with name feature; document. links: <a> signature with link; document. images: All elements on the page. 4. Element type (nodeType = 1) the Element type provides access and operations for tag names, subnodes, and features. 1. The tagName returned by the tagName is the big write format of the tag name. To compare the tagName, perform case-insensitive conversion. Node. tagName. toLowerCase () = "a"; 2. Basic Features of the HTML element className: corresponds to the class features of the element and is used to specify the css style of the element. 3. element attribute getAttribute (): gets a feature of an element. The feature name here is the same as the actual feature of the element. Therefore, to obtain the style name, use "class" instead of "clssName ". SetAttribute (attr, value): sets the element features. The first parameter is the feature name, and the second parameter is the feature value. The feature names set using this method are automatically converted to lowercase letters. RemoveAttribute (attr): permanently removes an attribute of an element. 5. Text Type (nodeType = 3) 1. nodeName = "# text" 2. Get the node Text content: nodeValue or data attribute. 3. Operation text node content appendData (text): append text to the end of the text node. DeleteData (offset, count): delete count characters from the offset position. InsertData (offset, text): Insert text from the offset position. ReplaceData (offset, count, text): Replace the text with the length of count starting from the offset position. SubstringData (offset, count): extract text with a length of count starting from the offset position. SplitText (offset): Splits a text node from a specified position into two text nodes. 4. normalize (): normalization text node. This method is called on elements that contain multiple text nodes. The text nodes are merged. Copy the code var node = document. getElementById ("ing_body_578997"); // obtain the text node var textnode = node. childNodes [0]; // obtain the node text value var data = textnode. data; // "I recently learned advanced js programming and it's also a basic book. It's time to drop the powder, '(* expect _ success *)'" // append the text textnode. appendData ("Text"); // recently, I learned advanced js programming. It's also a basic book. It's time to drop the powder, '(* pipeline _ Pipeline *) 'text // Delete textnode. deleteData (8, 10); // recently learned js advanced coding, '(* plain _ plain *)' Text // insert Text textnode. insertData (8, ""); // recently, I learned about js advanced editing. '(* Your _ blank *)' Text // replaces the Text textnode. replaceData (5, 25, ', restart'); // recently learned Js refueling // get the text snippet textnode. substringData (5, 1); //, // split into multiple nodes textnode. splitText (','); console. log (node. childNodes. length); // 2 // canonicalized node. normalize (); console. log (node. childNodes. length); // 1 copy Code 6. The DocumentFragment type (nodeType = 11) can be used as a repository. Save the nodes to be added to the document in the future. Copy the code (function () {var ul = document. getElementById ("myList"); var frag = document. createDocumentFragment (); var li = null, text = null; for (var I = 4; I <= 6; I ++) {li = document. createElement ("li"); text = document. createTextNode ("item" + I); li. appendChild (text); frag. appendChild (li);} ul. appendChild (frag) ;}) (); copy code 7. DOM operation 1. dynamic script ① contains an external script file through src. After loading, you can call it elsewhere on the page. Copy the code function LoadScriptSrc (src) {var script = document. createElement ("script"); script. type = "text/javascript"; script. src = src; document. body. appendChild (script);} LoadScriptSrc ("validate. js "); checkName (); copy code ② dynamically add in-row code scripts. The Code scope is global and available immediately after execution. Copy the code function LoadScript () {var script = document. createElement ("script"); script. type = "text/javascript"; try {script. appendChild (document. createTextNode ("function begin () {console. log ('Hello world. ')} ");} catch (ex) {script. text = "function begin () {console. log ('Hello world. ')} ";} document. body. appendChild (script);} LoadScript (); begin (); copy Code 2. dynamic style Note: The style must be added to the head. ① Use Link to dynamically add style files from external sources. The execution is asynchronous. Copy the code function loadCss (url) {var link = document. createElement ("link"); link. rel = "stylesheet"; link. href = url; var head = document. getElementsByTagName ("head") [0]; head. appendChild (link);} loadCss ("http://www.damifanli.com/data/css/index_index_914724003.css") Copy code ② use style to dynamically add embedded CSS style code. After adding a style to the page, you can see the effect immediately. Copy the code function loadCss (css) {var style = document. createElement ("style"); style. type = "text/css"; try {style. appendChild (document. createTextNode (css);} catch (ex) {style.styleSheet.css Text = css;} var head = document. getElementsByTagName ("head") [0]; head. appendChild (style);} loadCss ("body {background-color: red }");