5. Create a new node
The most commonly used methods are
createDocumentFragment()--Create a document fragment node
createElement(tagname)--Create an element with the tag name tagname
createTextNode(text)--Create a text node containing text text
createElement()、createTextNode()、appendChild()
<head>
<title>createElement() Example</title>
<script type="text/javascript">
function createMessage() {
var oP = ("p");
var oText = ("Hello World!");
(oText);
(oP);
}
</script>
</head>
<body onload="createMessage()">
</body>
</html>
removeChild()、replaceChild()、insertBefore()
Delete nodes
<head>
<title>removeChild() Example</title>
<script type="text/javascript">
function removeMessage() {
var oP = ("p")[0];
(oP);
}
</script>
</head>
<body onload="removeMessage()">
<p>Hello World!</p>
</body>
</html>
replace
<head>
<title>replaceChild() Example</title>
<script type="text/javascript">
function replaceMessage() {
var oNewP = ("p");
var oText = ("Hello Universe!");
(oText);
var oOldP = ("p")[0];
(oNewP, oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>Hello World!</p>
</body>
</html>
Before the new message is added to the old message
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function insertMessage() {
var oNewP = ("p");
var oText = ("Hello Universe!");
(oText);
var oOldP = ("p")[0];
(oNewP, oOldP);
}
</script>
</head>
<body onload="insertMessage()">
<p>Hello World!</p>
</body>
</html>
createDocumentFragment()
Once a node is added (or its descendant node), the page will be updated and reflects this change. This is great for a small amount of updates, however, when adding a lot of data to the document, the process can be very slow if you add these changes one by one. To solve this problem, you can create a document fragment, attach all new nodes to it, and then add the contents of the document fragment to the document at one time, if you want to create ten new paragraphs.
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function addMessages() {
var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
var oFragment = ();
for (var i=0; i < ; i++) {
var oP = ("p");
var oText = (arrText[i]);
(oText);
(oP);
}
(oFragment);
}
</script>
</head>
<body onload="addMessages()">
</body>
</html>
6. Make the characteristics like attributes
In most cases, all the features contained in HTML DOM elements are available as attributes.
Suppose there are the following image elements:
<img src = "" border=0 />
If you want to use the core DOM to get and set the src and border features, then use the getAttribute() and setAttribute() methods:
alert(("src"));
alert(("border"));
("src","");
("border",1);
However, using HTML DOM, you can use properties of the same name to get and set these values:
alert();
alert();
="";
="1";
The unique special case where the attribute name is different from the attribute name is the class attribute, which is used to specify a CSS class applied to a certain element, because class is a reserved word in ECMAScript, and in javascript, it cannot be used as a variable name, attribute name or all function name. Therefore, the corresponding attribute name becomes className;
Note: IE has a big problem with setAttribute(), it is best to use properties as much as possible.
method
To assist in creating tables, HTML DOM adds some features and methods to elements such as <table/>, <tbody/> and <tr/>.
Added the following to the <table/> element:
| Features/Methods | illustrate |
| caption | Point to the <caption/> element and put it into the table |
| tBodies | Collection of <tbody/> elements |
| tFoot | Point to the <tfoot/> element (if present) |
| tHead | Point to the <head/> element (if present) |
| rows | A collection of all rows in a table |
| createTHead() | Create a <head/> element and put it into a table |
| createTFood() | Create a <tfoot/> element and put it into a table |
| createCpation() | Create a <caption/> element and put it into a table |
| deleteTHead() | Delete the <head/> element |
| deleteTFood() | Delete the <tfoot/> element |
| deleteCaption() | Delete the <caption/> element |
| deleteRow(position) | Delete rows at the specified location |
| insertRow(position) | Insert a new row at a specified location in the rows collection |
The <tbody/> element has added the following content
| Features/Methods | illustrate |
| rows | <set of all rows in tbody/> |
| deleteRow(position) | Delete rows at the specified location |
| insertRow(position) | Insert a new row at a specified location in the rows collection |
<tr/>Element has added the following
| Features/Methods | illustrate |
| cells | <tr/> Collection of all cells in the element |
| deleteCell(postion) | Delete cells at a given location |
| insertCell(postion) | Insert a new cell at the point position of the cells collection |
8.Traveling through the DOM
NodeIterator，TreeWalker
DOM Level2 functions, these functions are only available in Mozilla and Konqueror/Safari, so I won't introduce them here.