Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính đầu DOM HTML

Thuộc tính head DOM HTML được liên kết với phần tử HTML . Nó được sử dụng để trả về phần tử . Nếu có nhiều phần tử head thì nó sẽ trả về phần tử head đầu tiên. Đây là thuộc tính chỉ đọc.

Cú pháp

Sau đây là cú pháp cho thuộc tính head -

document.head

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính HTML head DOM -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính đầu DOM HTML

Khi nhấp vào nút “Lấy tiêu đề” -

Thuộc tính đầu DOM HTML

Trong ví dụ trên -

Trước tiên, chúng tôi đã tạo một phần tử có chứa phần tử bên trong nó chỉ định tiêu đề cho trang web này - </P> <pre><head> <title>My title</title> </head></pre> <p> Sau đó, chúng tôi tạo một nút “Lấy tiêu đề” sẽ thực thi phương thức getTitle () khi người dùng nhấp vào. </P> <pre><button onclick="getTitle()">Get Title</button></pre> <p> Phương thức getTitle () sử dụng thuộc tính document head để lấy phần tử head và thuộc tính firstElementChild để lấy phần tử con đầu tiên là phần tử <title> trong trường hợp của chúng ta. </P> <p> Sau đó, chúng tôi sử dụng thuộc tính innerHTML trên phần tử tiêu đề để lấy văn bản bên trong nó và hiển thị nó trong đoạn văn có id “Sample” bằng thuộc tính innerHTML của nó - </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="ad5"> <script language='javascript' src='https://vn.wsxdn.com/css/ad/vn2.js'></script> </div> </section> <div id="turn-page" class="f-between"> <div class="page up f-align"> <i class="prev"></i> <section> <a class='LinkPrevArticle' href='https://vn.wsxdn.com/fd034x/om351g/1003064877.html' >Đối tượng tiêu đề HTML DOM </a> </section> </div> <div class="page down f-align"> <section> <a class='LinkNextArticle' href='https://vn.wsxdn.com/fd034x/om351g/1003064879.html' >HTML DOM HashChangeEvent </a> </section> <i class="next"></i> </div> </div> <section class="box4-l-list"> <div class="imgList f-between banner"> <ul class="f-between"> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003065352.html" class="text r-over r-over-3" title="Thuộc tính loại HTML DOM Ol ">Thuộc tính loại HTML DOM Ol </a> </div></li> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003065353.html" class="text r-over r-over-3" title="HTML DOM Ol start Thuộc tính ">HTML DOM Ol start Thuộc tính </a> </div></li> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003065354.html" class="text r-over r-over-3" title="Thuộc tính HTML DOM Ol đã đảo ngược ">Thuộc tính HTML DOM Ol đã đảo ngược </a> </div></li> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003065365.html" class="text r-over r-over-3" title="HTML DOM Title text Thuộc tính ">HTML DOM Title text Thuộc tính </a> </div></li> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003065366.html" class="text r-over r-over-3" title="Thuộc tính tiêu đề HTML DOM ">Thuộc tính tiêu đề HTML DOM </a> </div></li> </ul> </div> </section> </section> <aside class="box-r box4-r"> <div class="articleList"> <em>Bài báo nổi tiếng</em> <ol> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003064411.html" class="t-over" title="HTML DOM accessKey Property ">HTML DOM accessKey Property </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003064427.html" class="t-over" title="HTML DOM InternalHTML Thuộc tính ">HTML DOM InternalHTML Thuộc tính </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003064428.html" class="t-over" title="Thuộc tính id DOM HTML ">Thuộc tính id DOM HTML </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003064550.html" class="t-over" title="Thuộc tính HTML DOM trướcElementSibling ">Thuộc tính HTML DOM trướcElementSibling </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003064551.html" class="t-over" title="HTML DOM trước ">HTML DOM trước </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003064553.html" class="t-over" title="Thuộc tính HTML DOM scrollTop ">Thuộc tính HTML DOM scrollTop </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003064554.html" class="t-over" title="Thuộc tính HTML DOM scrollLeft ">Thuộc tính HTML DOM scrollLeft </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003064558.html" class="t-over" title="Chủ sở hữu HTML DOM Thuộc tính Tài liệu ">Chủ sở hữu HTML DOM Thuộc tính Tài liệu </a></li> </ol> </div> <section> <strong class="list-title"> <p>Máy Tính</p> <span></span> </strong> <ol class="texts"> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003064709.html" class="t-title"><strong class="r-over r-over-2">Đầu vào HTML DOM Thuộc tính mã hóa </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003064719.html" class="t-title"><strong class="r-over r-over-2">Thuộc tính HTML DOM isContentEditable </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003064737.html" class="t-title"><strong class="r-over r-over-2">HTML DOM cuối cùng Thuộc tính được sửa đổi </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003064739.html" class="t-title"><strong class="r-over r-over-2">HTML DOM lastChild Thuộc tính </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003064740.html" class="t-title"><strong class="r-over r-over-2">Thuộc tính lang HTML DOM </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003064752.html" class="t-title"><strong class="r-over r-over-2">HTML DOM li value Thuộc tính </strong></a> </li> </ol> </section> <ul class="typeList container f-start box4-typeList"> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/sq344k/' target="_self">lập trình C</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ay345t/' target="_self">C ++</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/zx346r/' target="_self">Redis</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/nk347f/' target="_self">Lập trình BASH</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ur348m/' target="_self">Python</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ca349u/' target="_self">Java</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/hf350z/' target="_self">Cơ sở dữ liệu</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/om351g/' target="_self">HTML</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/tr352l/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ay353s/' target="_self">Lập trình</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/jg354b/' target="_self">CSS</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/nl355g/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/mk356e/' target="_self">SQL</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ge357z/' target="_self">IOS</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ec358x/' target="_self">Android</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ol359g/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/vt360n/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/vt361n/' target="_self">C#</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/wu365o/' target="_self">PHP</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/us371m/' target="_self">SQL Server</a></li> </ul> </aside> </section> <footer class="container"> <span class="container f-center"> Bản quyền © <a href="https://vn.wsxdn.com">https://vn.wsxdn.com</a> Đã đăng ký Bản quyền </span> </footer> </body> </html>