JavaScript初识:获取节点

Posted 脚踏实地,仰望星空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript初识:获取节点相关的知识,希望对你有一定的参考价值。

JavaScriopt DOM有三大节点:元素节点、属性节点、文本节点。

其中获取元素节点的三种主要方法有:

1.document.getElementById();此方法根据节点的唯一id值获取节点。

  如<li id = "hamigua">哈密瓜</li>,document.getElementById("hamigua");

2.document.getElementByTagName();此方法根据节点的标签名获取节点。

  如<li></li>标签,document.getElementByTagName("li");

3.document.getElementByName();此方法根据节点的name属性获取节点。

  如<input type = "text" name = "n_hamigua" value = "哈密瓜"/>,document.getElementByName("n_hamigua");

  但是这个方法只能获取有name属性的节点,如<li name = "li_hamigua"></li>,document.getElementByName(li_hamigua);是获取不到的,使用时应注意这个问题。

 

而属性节点和文本节点都是需要先获取到元素节点之后,再获取。

属性节点:<input type = "text" id = "input_hamihua" value = "value_hamigua"/>;document.getElementById("input_hamigua").getAttributeNode("value");

这样才可以获取到input标签的value属性, 即获取到"value_hamigua"这个属性值。

文本节点:<li id = "li_hamigua">哈密瓜</li>;document.getElementById("li_hamigua").firstChild;

这样才可以获取到input标签的文本节点,即获取到"哈密瓜"这个文本值。

 

在这里解释一下三个节点的区别:

  ①元素节点:类似于<body></body>、<li></li>、<input/>这样的节点。

  ②属性节点:类似于<input type="text" name="text"/>中的"name=‘text‘"这样的节点。

  ③文本节点:类似于<li>HelloWorld</li>中的"HelloWorld"这样的节点。

以上是关于JavaScript初识:获取节点的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中DOM操作元素及节点操作

ajax初识

JavaScript—— PC 端网页特效

JavaScript—— BOM 浏览器对象模型

JavaScript WebAPI

Web-Lesson05-初识JavaScript:获取元素 事件