หลังจากทำความเข้าใจเฟรมเวิร์กและโหนดของ DOM (โมเดลวัตถุข้อความ) สิ่งที่สำคัญที่สุดคือการใช้โหนดเหล่านี้เพื่อประมวลผลหน้าเว็บ HTML
สำหรับโหนดโหนด DOM มีชุดของคุณสมบัติและวิธีการที่จะใช้ ใช้กันทั่วไปคือตารางต่อไปนี้
ปรับปรุง: http://www.w3school.com.cn/xmldom/dom_element.asp
1. การเข้าถึงโหนด
BOM จัดเตรียมวิธีขอบเขตบางอย่างในการเข้าถึงโหนด ที่ใช้กันทั่วไปคือ getElementsByTagname () และ getElementById ()
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นค้นหา () {
var oli = document.getElementsByTagname ("li");
var j = oli.length;
var j2 = oli [5] .tagname;
var j3 = oli [0] .childnodes [0] .nodevalue;
document.write (j+"<br>"+j2+"<br>"+j3+"<br>");
-
</script>
<body>
<body onload = "searchdom ()">
<div id- "in"> </div>
<ul> ภาษาลูกค้า
<li> html </li>
<li> JavaScript </li>
<li> CSS </li>
</ul>
<ul> ภาษาข้างเซิร์ฟเวอร์
<li> asp.net </li>
<li> jsp </li>
<li> php </li>
</ul>
</body>
document.getElementById ()
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
window.onload = function () {
ฟังก์ชั่น findId () {
var j4 = oli2.tagname;
document.write (J4);
-
var oli2 = document.getElementById ("Inn");
oli2.onclick = findid;
-
</script>
<li id = "Inn"> php </li>
การคัดลอกรหัสมีดังนี้:
<html>
<body id = "myid">
<div> </div>
<script type = "text/javascript">
x = document.getElementsByTagname ('div') [0];
document.write ("Div CSS Class:" + x.className);
document.write ("<br />");
document.write ("วิธีทางเลือก:");
document.write (document.getElementById ('myId'). classname);
</script>
</body>
</html>
// id รับ classname
2. ตรวจจับประเภทโหนด
ประเภทโหนดสามารถตรวจพบได้ผ่าน nodetype ของโหนดและพารามิเตอร์หนึ่งส่งคืนค่าจำนวนเต็ม 12
รูปแบบนิพจน์เช่น document.nodeType
สิ่งที่มีประโยชน์จริงๆคือสามประเภทที่กล่าวถึงโดยโหนดโมเดลในโมเดล DOM (I)
โหนดองค์ประกอบโหนดข้อความและโหนดแอตทริบิวต์
1. โหนดองค์ประกอบส่งคืนค่าของโหนดองค์ประกอบคือ 1
2. โหนดแอตทริบิวต์ส่งคืนค่าของโหนดแอตทริบิวต์คือ 2
3. ค่าส่งคืนโหนดข้อความคือ 3
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
window.onload = function () {
ฟังก์ชั่น findId () {
var j5 = oli2.nodeType;
document.write ("nodetype:" + j5 + "<br>");
-
var oli2 = document.getElementById ("Inn");
oli2.onclick = findid;
-
</script>
<li id = "Inn"> CSS </li>
return: nodetype: 1
ซึ่งหมายความว่าโหนดบางอย่างสามารถประมวลผลแยกต่างหากซึ่งใช้งานได้จริงมากเมื่อค้นหาโหนด มันจะถูกกล่าวถึงในภายหลัง
3. ใช้ความสัมพันธ์ระหว่างพ่อ-ลูก-พี่ชายเพื่อค้นหาโหนด
ในโหนดการเข้าถึงส่วนแรกให้ใช้แอตทริบิวต์ ChildNodes ของโหนดเพื่อเข้าถึงโหนดข้อความที่มีอยู่ในโหนดองค์ประกอบ
ส่วนนี้ใช้ความสัมพันธ์ระหว่างพ่อลูก-พี่ชายของโหนดเพื่อค้นหาโหนด
*ใช้แอตทริบิวต์ Haschildnodes และ ChildNodes เพื่อรับโหนดทั้งหมดที่มีอยู่ในโหนดนี้
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<ภาษาสคริปต์ = "JavaScript">
window.onload = function mydomispector () {
var oul = document.getElementById ("mylist"); // รับแท็ก <ul>
var domstring = "";
ถ้า (OUL.HASCHILDNODES ()) {// ตัดสินว่ามีโหนดลูก
var och = oul.childnodes;
สำหรับ (var i = 0; i <och.length; i ++) // ค้นหาทีละตัว
domstring + = och [i]. nodename + "<br>";
-
document.write (Domstring);
-
</script>
</head>
<body>
<ul id = "mylist">
<li> ซี่โครงหวานและเปรี้ยว </li>
<li> กรงหมูนึ่ง </li>
<li> Kimchi Fish </li>
<li> ไก่ย่างเกาลัด </li>
<li> เต้าหู้ mapo </li>
</ul>
</body>
4. ดอมได้รับโหนดพาเรนต์ของโหนด
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
var food = document.getElementById ("mydarfood");
document.write (food.parentnode.tagname)
-
</script>
</head>
<body>
<ul>
<li> ซี่โครงหวานและเปรี้ยว </li>
<li> กรงหมูนึ่ง </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> เต้าหู้ mapo </li>
</ul>
// กลับไปที่ UL
การใช้โหนดพาเรนต์โหนดพาเรนต์ของโหนดที่ระบุได้รับสำเร็จแล้ว
5. ใช้คุณสมบัติ parentNode
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
var food = document.getElementById ("mydarfood");
var parentelm = food.parentNode;
ในขณะที่ (parentelm.classname! = "สีสัน" && parentelm! = document.body)
parentelm = parentelm.parentNode; // ค้นหาตลอดทาง
document.write ("tagename:"+parentelm.tagname+"<br>");
document.write ("claaname:"+parentelm.classname+"<br>");
document.write ("typeof:"+typeof (อาหาร)+"<br>");
-
</script>
</head>
<body>
<div>
<ul>
<span>
<li> ซี่โครงหวานและเปรี้ยว </li>
<li> กรงหมูนึ่ง </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> เต้าหู้ mapo </li>
</span>
</ul>
</div>
</body> <br> // output <br> // tagename: div <br> claaname: สีสัน <br> typeof: Object
เริ่มต้นด้วยโหนดลูกและค้นหาโหนดพาเรนต์ขึ้นไปจนถึงชื่อคลาสของโหนดคือ "สีสัน"
6. ภราดรภาพของ DOMD
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
var foods = document.getElementById ("myDarfood");
var nextf = foods.nextsibling;
การแจ้งเตือน ("Nextsibling:" +nextf.tagname +"<br>");
-
</script>
</head>
<body>
<div>
<ul>
<span>
<li> ซี่โครงหวานและเปรี้ยว </li>
<li> กรงหมูนึ่ง </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> เต้าหู้ mapo </li>
<li> เต้าหู้ mapo </li>
<li> เต้าหู้ mapo </li>
</span>
</ul>
</div>
</body>
มันดูดีในการเข้าถึงโหนดพี่น้องโดยใช้คุณสมบัติ Nextsibling และ Preventsibling
แต่มันใช้ได้เฉพาะกับเบราว์เซอร์ IE เท่านั้น
เพื่อให้มีความเข้ากันได้ดีกับรหัสต้องใช้ nodetype เพื่อตัดสิน
ต่อไปนี้คือความเข้ากันได้:
การคัดลอกรหัสมีดังนี้:
<head>
<title> พี่น้อง </title>
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น nextsib (โหนด) {
var templast = node.parentNode.lastChild;
// ตัดสินว่าเป็นโหนดสุดท้ายถ้าเป็นเช่นนั้นคืนค่า null
if (node == templast)
คืนค่า null;
var tempobj = node.nextsibling;
// ค้นหาโหนดพี่ชายที่ตามมาทีละคนจนกว่าจะพบโหนดองค์ประกอบ
ในขณะที่ (tempobj.nodeType! = 1 && tempobj.nextsibling! = null)
tempobj = tempobj.nextsibling;
// ตัวดำเนินการสามจุดถ้าเป็นโหนดองค์ประกอบจะส่งคืนโหนดเองมิฉะนั้นจะส่งคืนค่า null
return (tempobj.nodeType == 1)? tempobj: null;
-
ฟังก์ชั่น prevsib (โหนด) {
var tempfirst = node.parentNode.firstChild;
// ตัดสินว่าเป็นโหนดแรกถ้าเป็นเช่นนั้นคืนค่า null
if (node == tempfirst)
คืนค่า null;
var tempobj = node.previoussibling;
// ค้นหาโหนดพี่ชายคนก่อนหน้าหนึ่งทีละหนึ่งจนกว่าจะพบโหนดองค์ประกอบ
ในขณะที่ (tempobj.nodeType! = 1 && tempobj.previoussibling! = null)
tempobj = tempobj.previoussibling;
return (tempobj.nodeType == 1)? tempobj: null;
-
ฟังก์ชั่น mydomispector () {
var myitem = document.getElementById ("mydearfood");
// รับองค์ประกอบต่อไปของพี่ชายโหนด
var nextlistitem = nextsib (myitem);
// รับองค์ประกอบก่อนหน้าของพี่ชายโหนด
var prelistItem = prevsib (myitem);
การแจ้งเตือน ("รายการสุดท้าย:" + ((NextListItem! = null)? nextlistitem.firstchild.nodevalue: null) + "prelistitem:" + ((prelistitem! = null)?
-
</script>
</head>
<body onload = "mydomispector ()">
<ul>
<li> ซี่โครงหวานและเปรี้ยว </li>
<li> กรงหมูนึ่ง </li>
<li> Kimchi Fish </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> เต้าหู้ mapo </li>
</ul>
</body>
7. ตั้งค่าคุณสมบัติโหนด
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
// รับรูปภาพ
var imgDatabe = document.getElementsByTagname ("IMG") [0];
// รับแอตทริบิวต์ชื่อเรื่องของรูปภาพ
imgdatabe.setAttribute ("src", "02.gif");
imgdatabe.setAttribute ("ชื่อ", "ความลาดชันที่เป็นมิตร");
document.write (imgdatabe.getAttribute ("title"));
document.write (imgdatabe.getAttribute ("alt"));
document.write (imgdatabe.getAttribute ("Node-Data"));
document.write (imgdatabe.getAttribute ("node_data"));
-
</script>
</head>
<body>
<div>
<img src = "01.jpg" node-data = "222" node_data = "3333">
<img src = "01.jpg">
</body>
ใช้เมธอด setAttribute () เพื่อตั้งค่าแอตทริบิวต์โหนด
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<meta charset = "utf-8" />
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
var bkk = document.getElementById ("new5");
var clickbk = document.getElementById ("Qiehuan");
clickbk.onclick = dsqiehuan;
ฟังก์ชั่น dsqiehuan () {
bkk.setAttribute ("คลาส", "xxx")
-
-
</script>
<style>
.xxx {color: #ddd}
</style>
</head>
<body>
<div id = "new5">
555
</div>
<em id = "Qiehuan"> switch </em>
</body>
8. สร้าง () สร้างโหนด
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<meta charset = "utf-8" />
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
var op = document.createElement ("P");
var otext = document.createtextNode ("สร้างโหนดโดยใช้ DOM");
var otext1 = document.createTextNode ("สร้างโหนด 123 โดยใช้ DOM");
Op.AppendChild (OTEXT);
op.AppendChild (OTEXT1);
document.body.appendchild (op);
-
</script>
</head>
<body>
<p> เดิมมี P ที่นี่ทดสอบ createElement () </p>
</body>
9. RemoveChild ลบโหนด
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<meta charset = "utf-8" />
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
var op = document.getElementsByTagname ("P") [0];
op.parentNode.removeChild (op); // ตอนจบคือ. removeChild (OP) ไม่ใช่. removeChild ("OP")
-
</script>
</head>
<body>
<p> เดิมมี P ที่นี่ทดสอบ createElement () </p>
</body>
10. Insertbefore () แทรกโหนดก่อนโหนดเฉพาะ
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<meta charset = "utf-8" />
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
var opold = document.getElementsByTagname ("P") [0];
var opnew = document.createElement ("P");
var otext = document.createtextNode ("โหนดใหม่")
Opnew.AppendChild (OTEXT);
opold.parentnode.insertbefore (opnew, opold); // รับพารามิเตอร์สองตัวหนึ่งคือพารามิเตอร์ใหม่และอีกอันคือพารามิเตอร์โหนดเก่า
-
</script>
</head>
<body>
<p> เดิมมี p </p>
</body>
11. แทรกองค์ประกอบใหม่หลังจากโหนดเฉพาะ (เพิ่ม 9 มกราคม 2015)
วิธีการที่จัดทำโดย DOM สามารถเพิ่มองค์ประกอบใหม่ได้ก่อนที่องค์ประกอบเป้าหมายโดยใช้ InsertBefore () หรือใช้เมธอด AppendChild () เพื่อเพิ่มองค์ประกอบใหม่ในตอนท้ายของ ChildNodes ขององค์ประกอบหลัก (ตัวอย่าง: ที่อยู่)
ในทางปฏิบัติมันมักจะใช้เพื่อเพิ่มองค์ประกอบใหม่ในตอนท้ายขององค์ประกอบเฉพาะ วิธี DOM ไม่มีวิธีการแทรกก่อน () แต่การใช้ความรู้ที่มีอยู่สามารถใช้ในการเขียนได้
แนวคิดรหัสมีดังนี้
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น insertfter (newElement, targetElement) {
var outernor = targetElement.parentNode; // ค้นหาองค์ประกอบหลักขององค์ประกอบเป้าหมาย
ถ้า (adarent.lastChild == TargetElement) // ถ้าเป้าหมายเป็นองค์ประกอบสุดท้าย
Outdoor.AppendChild (Newelement); // เพิ่มโดยตรงในองค์ประกอบสุดท้าย
อื่น // ก่อนที่จะแทรกลงในโหนดองค์ประกอบหลักขององค์ประกอบถัดไป
Outdoor.insertbefore (Newelement, TargetElement.nextSibling)
ตัวอย่าง: (ผนวกนอกองค์ประกอบ) อินสแตนซ์ดั้งเดิม: ที่อยู่
การคัดลอกรหัสมีดังนี้:
<head>
<meta charset = "utf-8">
<title> </title>
</head>
<body onload = "interp ()">
<p> ก่อน </p>
<p id = "เป้าหมาย"> วินาที </p>
<script type = "text/javascript">
ฟังก์ชั่น insertfter (newElement, targetElement) {
var outernor = targetElement.parentNode; // ค้นหาองค์ประกอบหลักขององค์ประกอบเป้าหมาย
ถ้า (adarent.lastChild == TargetElement) // ถ้าเป้าหมายเป็นองค์ประกอบสุดท้าย
Outdoor.AppendChild (Newelement); // เพิ่มโดยตรงในองค์ประกอบสุดท้าย
อื่น // ก่อนที่จะแทรกลงในโหนดองค์ประกอบหลักขององค์ประกอบถัดไป
Outdoor.insertbefore (Newelement, TargetElement.nextSibling)
-
ฟังก์ชั่น interp () {
var ooparent = document.getElementById ("เป้าหมาย");
var ooOnewp = document.createElement ("A");
oonewp.setAttribute ("href", "http://www.qq.com");
var ootextp = document.createtextNode ("ลิงก์");
OONEWP.APPENDCHILD (OOETEXTP);
insertfter (Ooonewp, Ooparent);
-
</script>
</body>
ตัวอย่าง: เพิ่มในองค์ประกอบ
12. เพิ่มการกระจายตัวของเอกสารเพื่อปรับปรุงประสิทธิภาพการดำเนินการ
การคัดลอกรหัสมีดังนี้:
<head>
<title> ChildNodes </title>
<meta charset = "utf-8" />
<ภาษาสคริปต์ = "JavaScript">
window.onload = function () {
var opold = document.getElementsByTagname ("P") [0];
var acolors = ["สีแดง", "สีเขียว", "สีน้ำเงิน", "Magenta", "Yellow", "ช็อคโกแลต", "ดำ", "Aquamarine", "Lime", "Fuchsia", "Brass", "Azure", "Brown", " บรอนซ์ "," Deeppink "," AliceBlue "," Grey "," Copper "," Coral "," Feldspar "," Orange "," Orchid "," Pink "," Plum "," Quartz "," Purple "];
var ofragment = document.createdocumentFragment (); // สร้างการกระจายตัวของเอกสาร
สำหรับ (var i = 0; i <acolors.length; i ++) {
var op = document.createElement ("P");
var otext = document.createTextNode (acolors [i]);
Op.AppendChild (OTEXT);
OFRAGMENT.APPENDCHILD (OP); // เพิ่มโหนดลงในชิ้นส่วนก่อน
-
//document.body.appendchild(ofragment); // เพิ่มลงในหน้าในครั้งสุดท้าย
opold.parentnode.insertbefore (Ofragment, opold); // รวมกับแทรกก่อนที่จะเพิ่มชิ้นส่วนเอกสารลงในโหนด
-
</script>
</head>
<body>
<p> เดิมมี p </p>
</body>