DOM's CRUD
C Creating create
1. Add tags directly to the body (can be any type)
document.write (' HelloWorld ');
document.write (' <p> ' HelloWorld ' </p> ');
2. Create a new label and insert it into any of the tags in the body appendchild
var div = document.createelement (' div ');
Div.style.background = ' red ';
Div.style.width = ' 500px ';
Div.style.height = ' 300px ';
Add to Parent tag
Document.body.appendChild (DIV);
Insert a picture into the div
var img = document.createelement (' img ');
IMG.SRC = ' image/img_02.jpg ';
Div.appendchild (IMG);
Get the P tag.
var img1 = document.createelement (' img ');
IMG1.SRC = ' image/img_03.jpg ';
var p = document.getElementById (' word ');
P.appendchild (IMG1);
There are 3 ways to delete: 1. Delete directly with body, but only for direct sub-tags
2. Get the parent tag of the current tag, and then delete
3. Take the current tag directly and call the Remove () method.
Document.body.removeChild (P);
Get the parent tag of the current tag, and then delete
P.parentnode.removechild (P);
P.remove ();
Change to the corresponding tag, make the changes ...
Check
The first way:
Document.getelementsbyclassname ();
Document.getelementsbyname ();
document.getElementsByTagName ();
document.getElementById ();
(Note: The ID returns a value, the other is the return array)
The second way: traverse the contents of the tag inside
Find (Document.body);
function find (object) {
for (var i in object) {
Console.log (Object[i]);
}
}
Console.log (Document.body.childNodes);
--------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------- -----------
The previous article tells the basic knowledge of DOM, and from it that in the DOM eye, every component of HTML can be regarded as a node (document node, element node, text node, attribute node, annotation node, where the attribute node belongs to the element node), The content of this article is through the DOM of these nodes for the operation of the additional pruning and checking.
Get (R)
1. getElementById (ID), Getelementsbyname (name), getElementsByTagName (TagName), all three methods ignore the structure of the document.
- getElementById (ID): Gets the element node by ID, if the page contains more than one node with the same ID, then only the first node is obtained, in theory, the ID should be unique on the page. The node is obtained through $ ("#id") in jquery, which is similar to the ID selector in CSS.
- Getelementsbyname (name): Gets a set of element nodes by name and returns an array of nodes with the same name. Note that this method in IE and the Internet (FireFox, Chrome) performance is not the same, this method should not be the DOM Level 1 specification, IE support Level 1, and later standards have a lot of differences. There are several main differences:
- The node of the form element can only be obtained by Getelementsbyname (name) under IE;
- IE does not distinguish between the ID and name, that is, the node array obtained through GETELEMENTSBYNAME (name) also contains the same ID and name, through getElementById (ID), or name as a parameter, see the official MSDN note.
- When you use the Getelementsbyname method, all elements with the document that has the specified NAME or ID attribute value is returned. Elements that support both the NAME and the ID attribute is included in the collection returned by the Getelementsbyname method, but isn't elements with a NAME expando.
- [HTML]View PlainCopyprint?
- <html>
- <head>
- <title> Node Additions and deletions change </title>
- <script type="Text/javascript">
- function init () {
- Alert (document.getElementById ("Div1"). NodeName);
- Alert (Document.getelementsbyname ("container"). length);//IE results are 2,chrome, FF result is 3
- Alert (document.getElementById ("container"). Value);//IE results are 1,chrome, FF result is 2
- }
- </Script>
- </head>
- <body onload="init ()">
- <div id="Div1" name="container">1</div>
- <!--<div id= "Div1" ></div>-->
- <span id="Div1" name="container">2</span>
- <input name="container" type="text" value="1" />
- <input id="container" type="text" value="2" />
- </Body>
- </html>
- getElementsByTagName (TagName): Gets a set of element nodes by TagName, returning an array of nodes with the same tagName. The special thing about this method is that it can be used not only by the top-level document, but also by all element nodes. such as: document.getElementById ("container"). Getelementbytagname ("div"), which is somewhat similar to the CSS style, For example, define all div styles under the container element node:. container Div{display:none;}.
2. ParentNode, FirstChild, and LastChild, these three properties can be returned to use.
HTML instance:
- [HTML]View PlainCopy print?
- <html>
- <head>
- <title> Node Additions and deletions change </title>
- </head>
- <body>
- <div id="Level1">
- <div id="Level21">
- <div id="Level3"><div>
- </div>
- <div id="level22"></div>
- </div>
- </Body>
- </html>
- ParentNode: Gets the parent node of the current node, such as document.getElementById ("Level21"). ParentNode, can also obj.parentNode.parentNode.parentNode.
- FirstChild: Gets the first child node of the current node, such as document.getElementById ("Level1"). FirstChild;, can also document.getElementById ("Level1"). Firstchild.firstchild.
- LastChild: Gets the last child node of the current node, such as document.getElementById ("Level1"). LastChild.
3. Root node, Document.documentelement gets the HTML as well as the root node in the XML document, Document.body provides direct access to the body node.
4. All sub-nodes: ChildNodes and children, different versions of various browsers behave differently.
5. Node Information: nodeName (tagName), NodeValue, NodeType.
- NodeName
- The nodename of the element node is the label name
- The nodename of the attribute node is the property name
- The nodename of the text node is #text
- The nodename of the document node is #document
- NodeValue
- The nodevalue of a text node contains text
- The nodevalue of the attribute node contains the property value
- ELEMENT nodes and document nodes are not nodevalue
- NodeType
-
| element Type |
node Type |
| Elements |
1 |
| Property |
2 |
| Text |
3 |
| Comments |
8 |
| Document |
9 |
Create (C) & Modify (U) & Delete (D)
Write An example of clicking a cell into a text box.
[JavaScript]View PlainCopyprint?
- <title> node deletion and modification </title>
- <script type="Text/javascript" >
- function Appendinput (tdnode) {
- //Create INPUT element node, createelement create element node, createTextNode (value) Create text node
- var inputnode = document.createelement ("input");
- //Assign a value to the input property
- Inputnode.value = Tdnode.innertext;
- Inputnode.name = "value";
- //delete the text node of the cell, parameter is the child node object to be deleted
- Tdnode.removechild (Tdnode.firstchild);
- //Append input to the cell, appendchild (node) appends node to the end of the parent node, insertbefore (Node1, Node2) before adding Node1 to Node2
- Tdnode.appendchild (Inputnode);
- //focus on input, under Chrome, the cursor is positioned directly to the far right of the text, IE does the leftmost
- Inputnode.focus ();
- //Move the cursor to the far right of the text
- Movecursortoright (Inputnode);
- }
- /** cursor to the far right of the text * *
- function Movecursortoright (obj) {
- var r = Obj.createtextrange ();
- R.movestart (' character ', obj.value.length);
- R.collapse (true);
- R.select ();
- }
- </script>
- <body>
- <table>
- <tr>
- <TD onclick="Appendinput (This)" >Hello!</td>
- </tr>
- </table>
- </body>
"Repost" DOM CRUD
