五javaScript基础&DOM
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了五javaScript基础&DOM相关的知识，希望对你有一定的参考价值。
笔记内容导图：
一、元素对象（element对象）
- 要操作element对象，首先要获取到element （使用document里面相应的方法获取）
- element里面的方法
- getAttribute("属性名称") ：获取属性里面的值
<html> <body> <input type="text" id="a" class="haha" value="name"> </body> <script type="text/javascript"> var input1 = document.getElementById("a"); alert(input1.value); //name alert(input1.getAttribute("value")); //name alert(input1.class); //undefined 注意：class取不到值得原因：class是一个关键字。所以只能用getAttribute取class的值 alert(input1.getAttribute("class")); //haha alert(input1.id); //a alert(input1.getAttribute("id")); //a </script> </html>
- setAttribute("name","value") : 设置属性
- removeAttribut(name) : 删除属性
<html> <body> <input type="text" id="a" value="name"> </body> <script type="text/javascript"> var input1 = document.getElementById("a"); alert(input1.getAttribute("class")); //null input1.setAttribute("class","haha"); //设置class属性，并且给值为haha alert(input1.getAttribute("class")); //haha input1.removeAttribute("class"); //删除属性class alert(input1.getAttribute("class")); //null input1.removeAttribute("value"); //删除属性value alert(input1.getAttribute("value")); //name 注意：removeAttribute不能删除value！ </script> </html>
- getAttribute("属性名称") ：获取属性里面的值
- 获取标签下面的子标签
- 使用属性 childNodes，但是这个属性兼容性很差
html> <body> <ul id="ulid"> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> </ul> </body> <script type="text/javascript"> var ul11 = document.getElementById("ulid"); var lis = ul11.childNodes; alert(lis.length); //在ie下结果是3，在火狐下是7 </script> </html>
-
所以，获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法。该方法返回值是一个集合
<html> <body> <ul id="ulid"> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> </ul> </body> <script type="text/javascript"> var ul11 = document.getElementById("ulid"); var lis = ul11.getElementsByTagName("li"); alert(lis.length); //3 </script> </html>
- 使用属性 childNodes，但是这个属性兼容性很差
二、Node对象
以上是关于五javaScript基础&DOM的主要内容，如果未能解决你的问题，请参考以下文章