Transfer from:
http://tjian.myrice.com/study_data/script-2/1.htm
We know that if you use the DHTML object model to manipulate the content of the document, you must understand the special properties and methods of the relevant document elements. Because there are many elements of the document, there are many corresponding properties and methods. In order to achieve a function, the developers have to query many data. However, there is a DOM technology, everything becomes simple, and the properties and methods of manipulating documents have an element-independent feature, which allows us to operate document content in the same steps. Undoubtedly, DOM technology provides the most convenient means for developers to operate documents at the subject level.
This article is a comprehensive introduction to how to use the DOM attributes and methods in JavaScript and manipulate documents.
Use Data, NodeValue, and SRC properties
The DOM provides two properties to modify the text node, they are DATA and NODEVALE. The two properties implementation is the same, the syntax is: object.data = "new value" or object.nodevaule = "new value", where Object represents the text item node in the page. If you modify the content of the graphic file, the syntax is: Object.src = "new value", where the Object represents the IMG tag node in the page. Let's take a look at the example below:
DOM Demo </ title> </ head> <body id = "body"> this is the document body <p id = "p1node"> this is paragraph 1. </ P> < P id = "p2node"> this is paragraph 2. </ P> <p id = "p3node"> this is paragraph 3. <img id = "imgnode" src = "myexam.gif"> this text backs the Image < Table ID = "Tablenode"> <tr> <TD BGColor = Yellow> This Is Row 1, Cell 1 </ TD> <TD BGColor = Orange> this Is Row 1, Cell 2 </ TD> </ TR> <TR > <TD BGCOLOR = Red> This Is Row 2, Cell 1 </ TD> <TD BGColor = Magenta> This Is Row 2, Cell 2 </ TD> </ TR> <TR> <TD BGColor = LightGreen> this IS Row 3, Cell 1 </ TD> <TD BGCOLOR = BEIGE> This Is Row 3, Cell 2 </ TD> <P> </ Table> </ P> <p id = "p4node"> this is paragraph 4 . </ P> <script language = "javascript"> <! - alert ("page initial status" "/ n / n" "bodynode.firstchild.nodevalue =" bodynode.firstchild.nodeValue "/ n " " bodyNode.firstChild.data = " bodyNode.firstChild.data " / n "); bodyNode.firstChild.nodeValue =" This is the new document body, set by the nodeValue property "; p3Node.childNodes [1] .src = "myexam2.gif"; Alert ("After modifying the page content " " / n / n " " bodynode.firstchild.nodevalue = " bodyue " / n " " bodynode.firstchild.data = " bodynode.firstchild.data " / n " " P3Node.childNodes [1] .SRC = " </p>
<p>P3Node.childNodes [1] .src); // -> </ script> </ body> </ html> The above code first displays the initial content of the page and the relevant attribute value of the node p1node, then the first to the node Bodynode The NodeValue property of a child node is assigned to modify its text content, and the contents of the node P3Node's second child node (that is, IMG tag) is assigned to modify the contents of the graphic. Click here to run this instance.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-104268.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="104268" 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.036</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 = 'mR_2BG90n3KhrSkqtEqJH9fUDsUKvH3o35YgDIPFTY3aHsDpoptW6CgmMQ4bQ5LU3VRA78L_2B3L4ft4u3_2FoAeBHrg_3D_3D';
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>
