คุณสมบัติส่วนหัว HTML DOM เชื่อมโยงกับองค์ประกอบ HTML
ใช้สำหรับส่งคืนองค์ประกอบ หากมีหลายองค์ประกอบส่วนหัวก็จะส่งคืนองค์ประกอบส่วนหัวแรก เป็นคุณสมบัติแบบอ่านอย่างเดียว ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติส่วนหัว -
document.head
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ HTML DOM head -
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>head property example</h1>
<p>Get this document title by clicking on the below button</p>
<button onclick="getTitle()">Get Title</button>
<p id="Sample"></p>
<script>
function getTitle() {
var x = document.head.firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The title of this document is: "+x;
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม "รับชื่อ" -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างองค์ประกอบ
ที่มีองค์ประกอบ อยู่ข้างในโดยระบุชื่อสำหรับหน้าเว็บนี้ -</P> <pre><head>
<title>My title</title>
</head></pre> <p>
จากนั้นเราจะสร้างปุ่ม "Get Title" ที่จะรันเมธอด getTitle() เมื่อผู้ใช้คลิก</P> <pre><button onclick="getTitle()">Get Title</button></pre> <p>
เมธอด getTitle() ใช้คุณสมบัติ head ของเอกสารเพื่อรับองค์ประกอบ head และคุณสมบัติ firstElementChild เพื่อรับองค์ประกอบย่อยตัวแรกซึ่งเป็นองค์ประกอบ <title> ในกรณีของเรา</P> <p>
จากนั้นเราใช้คุณสมบัติ innerHTML กับองค์ประกอบชื่อเพื่อรับข้อความภายในและแสดงในย่อหน้าด้วยรหัส "ตัวอย่าง" โดยใช้คุณสมบัติ innerHTML -</P> <pre>function getTitle() {
var x = document.head.firstElementChild.innerHTML;
document.getElementById("Sample").innerHTML = "The title of this document is: "+x;
}</pre> <br>
</article>
<div class="ad ad5">
<script language='javascript' src='/ad/w.js'></script>
</div>
<section id="turn-page" class="t-over">
<div class="f-start f-align">
<i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i>
<a class='LinkPrevArticle' href='https://th.wsxdn.com/db044w/zx451s/1004064877.html' >วัตถุส่วนหัว HTML DOM </a>
</div>
<div class="f-start f-align">
<i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i>
<a class='LinkNextArticle' href='https://th.wsxdn.com/db044w/zx451s/1004064879.html' >HTML DOM HashChangeEvent </a>
</div>
</section>
<section class="box1-3">
<ol class="f-between">
<li class="aList-2 aList f-between f-align">
<div>
<a href="https://th.wsxdn.com/db044w/zx451s/1004065353.html" class="title">
<p class="r-over r-over-2" title="HTML DOM Ol เริ่มคุณสมบัติ ">HTML DOM Ol เริ่มคุณสมบัติ </p>
</a>
</div>
</li>
<li class="aList-2 aList f-between f-align">
<div>
<a href="https://th.wsxdn.com/db044w/zx451s/1004065354.html" class="title">
<p class="r-over r-over-2" title="HTML DOM Ol กลับรายการทรัพย์สิน ">HTML DOM Ol กลับรายการทรัพย์สิน </p>
</a>
</div>
</li>
<li class="aList-2 aList f-between f-align">
<div>
<a href="https://th.wsxdn.com/db044w/zx451s/1004065365.html" class="title">
<p class="r-over r-over-2" title="คุณสมบัติข้อความ HTML DOM ชื่อเรื่อง ">คุณสมบัติข้อความ HTML DOM ชื่อเรื่อง </p>
</a>
</div>
</li>
<li class="aList-2 aList f-between f-align">
<div>
<a href="https://th.wsxdn.com/db044w/zx451s/1004065366.html" class="title">
<p class="r-over r-over-2" title="คุณสมบัติ HTML DOM ชื่อเรื่อง ">คุณสมบัติ HTML DOM ชื่อเรื่อง </p>
</a>
</div>
</li>
</ol>
</section>
</section>
<aside class="box-r">
<section class="box4-1">
<strong>HTML</strong>
<ol>
<li class="f-start">
<i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i>
<a href="https://th.wsxdn.com/db044w/zx451s/1004064411.html" title="คุณสมบัติคีย์การเข้าถึง HTML DOM ">
<p class="r-over r-over-2">คุณสมบัติคีย์การเข้าถึง HTML DOM </p>
</a>
</li>
<li class="f-start">
<i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i>
<a href="https://th.wsxdn.com/db044w/zx451s/1004064427.html" title="HTML DOM innerHTML คุณสมบัติ ">
<p class="r-over r-over-2">HTML DOM innerHTML คุณสมบัติ </p>
</a>
</li>
<li class="f-start">
<i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i>
<a href="https://th.wsxdn.com/db044w/zx451s/1004064428.html" title="คุณสมบัติรหัส HTML DOM ">
<p class="r-over r-over-2">คุณสมบัติรหัส HTML DOM </p>
</a>
</li>
<li class="f-start">
<i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i>
<a href="https://th.wsxdn.com/db044w/zx451s/1004064550.html" title="HTML DOM ก่อนหน้าElementSibling Property ">
<p class="r-over r-over-2">HTML DOM ก่อนหน้าElementSibling Property </p>
</a>
</li>
<li class="f-start">
<i><img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""></i>
<a href="https://th.wsxdn.com/db044w/zx451s/1004064551.html" title="HTML DOM ก่อนหน้าคุณสมบัติพี่น้อง ">
<p class="r-over r-over-2">HTML DOM ก่อนหน้าคุณสมบัติพี่น้อง </p>
</a>
</li>
</ol>
</section>
<ul>
<li class="f-start f-align">
<a href="https://th.wsxdn.com/db044w/zx451s/1004064752.html" class="i-text"><p class="r-over r-over-3">HTML DOM li ค่าคุณสมบัติ </p></a>
</li>
<li class="f-start f-align">
<a href="https://th.wsxdn.com/db044w/zx451s/1004065222.html" class="i-text"><p class="r-over r-over-3">HTML DOM tagName คุณสมบัติ </p></a>
</li>
<li class="f-start f-align">
<a href="https://th.wsxdn.com/db044w/zx451s/1004065331.html" class="i-text"><p class="r-over r-over-3">ชื่อ HTML DOM คุณสมบัติ </p></a>
</li>
<li class="f-start f-align">
<a href="https://th.wsxdn.com/db044w/zx451s/1004065351.html" class="i-text"><p class="r-over r-over-3">คุณสมบัติเนื้อหาข้อความ HTML DOM </p></a>
</li>
<li class="f-start f-align">
<a href="https://th.wsxdn.com/db044w/zx451s/1004065352.html" class="i-text"><p class="r-over r-over-3">คุณสมบัติประเภท HTML DOM Ol </p></a>
</li>
</ul>
<ul class="types f-between">
<li><a class='childclass' href='https://th.wsxdn.com/db044w/hf444z/' target="_self">การเขียนโปรแกรม C</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/bz445u/' target="_self">C++</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/tr446l/' target="_self">Redis</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/rp447j/' target="_self">การเขียนโปรแกรม Bash</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/wu448o/' target="_self">Python</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/nl449f/' target="_self">Java</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/ig450a/' target="_self">ฐานข้อมูล</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/zx451s/' target="_self">HTML</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/ec452w/' target="_self">JavaScript</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/db453v/' target="_self">การเขียนโปรแกรม</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/if454a/' target="_self">CSS</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/ge455y/' target="_self">Ruby</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/xv456p/' target="_self">SQL</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/jh457b/' target="_self">iOS</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/om458g/' target="_self">Android</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/mk459f/' target="_self">MongoDB</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/rp460j/' target="_self">MySQL</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/qn461i/' target="_self">C#</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/jh465b/' target="_self">PHP</a></li>
<li><a class='childclass' href='https://th.wsxdn.com/db044w/kh471c/' target="_self">SQL Server</a></li>
</ul>
</aside>
</section>
<footer>
<section class="msg f-center container">
<span class="f-start">
ลิขสิทธิ์ ©
<a href="https://th.wsxdn.com">https://th.wsxdn.com</a>
สงวนลิขสิทธิ์
</span>
</section>
</footer>
</body>
</html>
