Let's take a simple document tree first.
Obviously the top-level node of the tree is the Nodea node, followed by moving to any point in the tree by the specified suitable node, combining the following code you can better understand the relationship between this tree node: .1138611
Nodea.firstchild = nodea1
Nodea.lastchild = Nodea3
Nodea.childNodes.Length = 3
Nodea.childNodes [0] = nodea1
Nodea.childNodes [1] = nodea2
Nodea.childNodes [2] = nodea3
Nodea1.parentNode = Nodea
Nodea1.nextsibling = nodea2
Nodea3.prevsibling = nodea2
Nodea3.nextsibling = null
Nodea.lastchild.firstchild = Nodea3a
Nodea3b.ParentNode.ParentNode = Nodea
The DOM definition provides a practical method for operating a node structure of a document object, providing these common methods such as execution object insertion, update, deletion, cloning, etc. 1138611
INSERTBEFORE () - Insert a new child node before the reference child node. If the child node is null, the new child node will be inserted as the last child node of the call node. 1138611
Replacechild () - Instead of using the specified newchild in the ChildNodes collection specifier; if it is successful, return OldChild; if newchild is null, simply remove Oldchild .1138611
RemoveChild () - Remove the node specified by RemoveChild from the ChildNodes collection of nodes. If delete is successful, return the deleted child node .1138611
Appendchild () - Add a new node to the end of the ChildNodes collection, if successful, return to the new node .1138611
Clonenode () - Create a new, copy node, and if the incoming parameter is true, the child node will be copied. If the node is an element, then the corresponding attribute will be replicated, and the new node is returned. 1138611
In order to access or create a new node in a document tree, you can use the following methods: getElementByid () getElementsBytagname () CreateElement () createttribute () CreateElement () CreateTextNode () Note: Only one document object in a page, except getElementsBytagname Outside, other methods can only be called via Document.MethodName (). 1138611
Look at the following example: .1138611
</ title></p>
<p></ hEAD></p>
<p><body></p>
<p><p> this is a sample paragraph. </ p></p>
<p><Script language = "javascript"></p>
<p><! -</p>
<p>Alert (Document.Documentelement.lastchild.FirstChild.tagname);</p>
<p>// -></p>
<p></ Script></p>
<p></ body></p>
<p></ html></p>
<p>The results will show "P", here are some explanations document.documentElement - gives the page's HTML tag lastChild -. Gives the BODY tag firstChild -. Gives the first element in the BODY tagName -. Gives that element's tag name, "P" In this case..1138611 another: .1138611</p>
<p><html></p>
<p><HEAD></p>
<p><title> </ title></p>
<p></ hEAD></p>
<p><body></p>
<p><p> this is a sample paragraph. </ p></p>
<p><Script language = "javascript"></p>
<p><! -</p>
<p>Alert (Document.Documentelement.lastchild.FirstChild.tagname);</p>
<p>// -></p>
<p></ Script></p>
<p></ body></p>
<p></ html></p>
<p>This example is not a big difference, but only one blank line, but in NS, it will automatically add a node for the blank line, so the return value is "undefined", and the jump in IE Still pointed to the P tag. 1138611</p>
<p>More commonly used methods: .1138611</p>
<p><p id = "myparagraph"> this is a sample paragraph. </ p></p>
<p>...</p>
<p>Alert (Document.GetElementByid ("MyParagraph"). Tagname);</p>
<p>This approach You don't have to care about which place in the document tree, and just guarantees that its ID number is the only one. 1138611</p>
<p>Next, an access element node is document.getlementsBytagName (), which is an array, for example, you can change the connection of the entire page by the following example. 1138611</p>
<p>Var nodelist = document.getlementsBytagname ("a");</p>
<p>For (var i = 0; i <nodelist.length; i )</p>
<p>Nodelist [i] .style.color = "# ff0000";</p>
<p>Attribute and Attributes</p>
<p>Attribute objects and elements are associated, but it is not considered part of the document tree, so the attribute cannot be used as part of the child node collection. There are three ways to establish new properties for the elements. 1138611</p>
<p>1.</p>
<p>Var attr = document.createattribute ("Myattribute");</p>
<p>Attr.Value = "MyValue";</p>
<p>Var el = document.getlementByid ("MyParagraph");</p>
<p>El.setttributenode (Attr);</p>
<p>2.</p>
<p>Var el = document.getlementByid ("MyParagraph");</p>
<p>El.SetaTRibute ("Myattribute", "MyValue");</p>
<p>3.</p>
<p>Var el = document.getlementByid ("MyParagraph");</p>
<p>El.myattribute = "myvalue";</p>
<p>You can define your own properties in the HTML tag: .1138611</p>
<p><p id = "myparagraph" myattribute = "MyValue"> this is a sample paragraph. </ p> ...</p>
<p>Alert (Document.GetElementByid ("MyParagraph"). GetAttribute ("MyAttribute");</p>
<p>The return value will be "MyValue". But please note that you must use GetAttribute instead of AttributeName, because some browsers do not support custom properties .1138611</p>
<p>Attribute can also be easily removed from one element, you can use removeAttribute () or pointing Element.attributeName to a null value...</p>
<p>We can produce some dynamic effects through Attributes: .1138611</p>
<p><p id = "sample1" align = "left"> text in a paragraph element. </ p></p>
<p>... Code for the Links ...</p>
<p>Document.getElementByid ('Sample1'). SetAttribute ('align', 'left');</p>
<p>Document.getlementByid ('Sample1'). SetAttribute ('align', 'right');</p>
<p>Alternatively: .1138611</p>
<p><p id = "Sample2" style = "text-align: left;"> Text in a paragraph</p>
<p>Element. </ p></p>
<p>... Code for the Links ...</p>
<p>Document.getLementByid ('Sample2'). style.textalign = 'left';</p>
<p>Document.getLementByid ('Sample2'). style.textalign = 'right';</p>
<p>Like the above example, the properties available to modify the style can be modified by elements, even in the class. The only thing to mention is that TextAlign is evolved from the text-align in the style, there is a basic law, that is The attribute in Style If any -, in the DOM will be removed and the subsequent letters will be changed to uppercase, and some are if there is no style attribute even if the element is not used. 1138611</p>
<p>Text Nodes:</p>
<p>Let's take a look at the example .1138611</p>
<p><p id = "sample1"> this is the initial text. </ p></p>
<p>... Code for the Links ...</p>
<p>Document.getElementByid ('Sample1'). Firstchild.nodeValue =</p>
<p>'Once Upon a Time ...';</p>
<p>Document.getElementByid ('Sample1'). Firstchild.nodeValue =</p>
<p>'... in a Galaxy Far, Far Away';</p>
<p>First of all, Text Nodes has no ID attribute as Elements, all it does not directly pass document.getlementById () or document.getlementsBytagname (), you will know more, you can see some can see Document.GtelementByid ('Sample1 ') .firstchild.nodeValue can read or set the value of Text Nodes. 1138611</p>
<p>Another more complicated example .1138611</p>
<p><p id = "Sample2"> this is the <b> initial </ b> text. </ p> Its document structure is here via Document.GtelementByid ('Sample1'). Firstchild.NodeValue tells me only "this IS" "and INITIAL text will not change. Everyone should see it and the innerhtml. Of course you can use it. 1138611</p>
<p>Document.getElementByid ('Sample3'). Firstchild.nodeValue =</p>
<p>'<B> ONCE </ B> UPON A TIME ...';</p>
<p>Document.getElementByid ('Sample3'). Firstchild.nodeValue =</p>
<p>'... in a galaxy <i> far, far </ i> away';</p>
<p>The HTML code will not be interpreted, and the browser will show them as ordinary text. 1138611</p>
<p>Create and delete text nodes:</p>
<p>Var mytextNode = document.createtextNode ("My Text");</p>
<p>With the above code you can create a new text node, but it is not part of the document tree. To make it displayed on the page, you must make it a child of a node in the document tree, because Text Nodes can't have a son. So you can't join it into a text nodes, Attribute is not part of the document tree, this way is not, now only Elements Nodes, the following example shows how to add and remove a text node.1138611</p>
<p><p id = "sample1"> Initial text within a paragraph element. </ p></p>
<p>... Code to Add A Text Node ...</p>
<p>Var text = document.createtextNode ("New Text" ( Counter1));</p>
<p>VAR EL = Document.GtelementByid ("Sample1");</p>
<p>El.Appendchild (Text);</p>
<p>... Code to Remove The Last Child Node ...</p>
<p>VAR EL = Document.GtelementByid ("Sample1");</p>
<p>IF (el.haschildnodes ())</p>
<p>El.RemoveChild (el.lastchild);</p>
<p>Increasing the text is very easy, the above code establishes a new Text Node and adds it to the end of the childnodes array through the appendchild () method, and sets a global variable of Counter1 to observe the return value of HaschildNodes (). True or false; used to determine if there is a child to prevent errors generated when it is called when there is no Child. 1138611</p>
<p>Create ELEMENT NODES</p>
<p>With the above foundation, it should be more likely to understand, first look at the following code. 1138611</p>
<p><div id = "sample1"> this text is in a div element. </ div></p>
<p>... Code for the link ...</p>
<p>Var Parael, Boldel;</p>
<p>Parael = Document.createElement ("P");</p>
<p>Boldel = Document.createElement ("b");</p>
<p>Parael.Appendchild (Document.createTextNode ("this is a new paragraph with"); boldel.appendchild (document.createtextNode</p>
<p>Parael.Appendchild (Boldel);</p>
<p>Parael.Appendchild (Document.createTextNode ("Text Added to the Div");</p>
<p>Document.GetElementByid ("Sample1"). Appendchild (Paael);</p>
<p>You can also set Attribute directly for new Element Nodes, you can: .1138611</p>
<p>boldel.style.color = "# fff00";</p>
<p>Parael.Appendchild (Boldel);</p>
<p>Or: .1138611</p>
<p>Parael.Appendchild (Boldel);</p>
<p>boldel.style.color = "# fff00";</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-130138.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="130138" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.105</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'qyL60evRLEHLcJfuN2AD8sTz3BxG9sA6Zmj8S38VGm3cPAevooViObbI3AT_2B19Dh10AqcRnfhH4HrP2A';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
