జావాస్క్రిప్ట్ హెచ్టిఎంఎల్ డొమ్ ఎలమెంట్

本章向您讲解如何查找和访问 HTML 页面中的 HTML 元素。

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：

  • 通过 id 查找 HTML 元素
  • టాగ్ పేరు ద్వారా హెచ్‌టిఎమ్ఎల్ మూలకాలను కనుగొనుట
  • CSS ఎంపికకర్త ద్వారా హెచ్‌టిఎమ్ఎల్ మూలకాలను కనుగొనుట
  • CSS ఎంపికకర్త ద్వారా హెచ్‌టిఎమ్ఎల్ మూలకాలను కనుగొనుట
  • 通过 HTML 对象集合查找 HTML 元素

通过 id 查找 HTML 元素

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

本例查找 id="intro" 的元素：

实例

var myElement = document.getElementById("intro");

亲自试一试

如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。

మూలకం కనుగొనబడలేకపోయితే, myElement లో అన్ని మూలకాలు ఉంటాయి: null.

టాగ్ పేరు ద్వారా హెచ్‌టిఎమ్ఎల్ మూలకాలను కనుగొనుట

ఈ ఉదాహరణలో అన్ని మూలకాలను కనుగొనబడింది: <p> మూలకం:

实例

var x = document.getElementsByTagName("p");

亲自试一试

ఈ ఉదాహరణలో id="main" అన్ని మూలకాలను కనుగొని, "main" లో అన్ని మూలకాలను కనుగొనుట <p> మూలకం:

实例

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

亲自试一试

CSS ఎంపికకర్త ద్వారా హెచ్‌టిఎమ్ఎల్ మూలకాలను కనుగొనుట

మీరు ఒకే క్లాస్ పేరు కలిగిన అన్ని హెచ్‌టిఎమ్ఎల్ మూలకాలను కనుగొనాలి అయితే, ఈ ఉపయోగించండి: getElementsByClassName().

ఈ ఉదాహరణలో class="intro" అన్ని మూలకాల జాబితా పునరుద్ధరించబడింది:

实例

var x = document.getElementsByClassName("intro");

亲自试一试

ఇంటర్నెట్ ఎక్స్‌లోరర్ 8 మరియు దాని ముంది సంస్కరణలకు అనువందించబడలేదు.

CSS ఎంపికకర్త ద్వారా హెచ్‌టిఎమ్ఎల్ మూలకాలను కనుగొనుట

మీరు నిర్దేశిత CSS ఎంపికకర్త (id, క్లాస్ పేరు, రకం, లక్షణం, లక్షణపు విలువలు మొదలెడి) అన్ని హెచ్‌టిఎమ్ఎల్ మూలకాలను కనుగొనాలి అయితే, ఈ ఉపయోగించండి: querySelectorAll() మాధ్యమము.

ఈ ఉదాహరణలో class="intro" అన్ని పునరుద్ధరించబడింది: <p> మూలకాల జాబితా:

实例

var x = document.querySelectorAll("p.intro");

亲自试一试

querySelectorAll() ఇంటర్నెట్ ఎక్స్‌లోరర్ 8 మరియు దాని ముంది సంస్కరణలకు అనువందించబడలేదు.

通过 HTML 对象选择器查找 HTML 对象

本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值：

实例

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "
";
}
document.getElementById("demo").innerHTML = text;

亲自试一试

以下 HTML 对象（和对象集合）也是可访问的：