定位页面元素
定位页面元素方法
Document对象提供了属性和方法实现定位页面元素功能,这也是DOM的标准规范中Docu ument对象的主要应用之一。
Document对象提供实现定位页面元素的方法具有如下几种:
● getElementByld()方法: 通过页面元素的id属性值定位元素。.
● getElementsByName()方法: 通过页面元素的name属性值定位元素。
● getElementsByTagName()方法: 通过页面元素的元素名定位元素。
● getElementsByClassName()方法: 通过页面元素的class属性值定位元素。
使用getElementByld()方法定位页面元素:
HTML页面元素的id属性的特点是唯一、不可重复的,所以通过这种方式定位的HTML页面元素也是唯一的。
// 通过id名来对元素进行定位
var btn = document.getElementById('btn');
console.log(btn);
使用getElementsByName()方法定位页面元素:
// 通过页面中Class名来对元素进行定位;
var btn = document.getElementsByClassName('btn');
// 得到HTMLCollection集合 -> 类数组对象;
console.log(btn);
注意:使用getElementsByName()方法定位页面元素时,正确写法为:
// 通过页面中Class名来对元素进行定位;
var btn = document.getElementsByClassName('btn')[0];
// 得到页面内类名为btn的元素;
console.log(btn);
使用getElementsByTagName()方法:
<body>
<button name="btns"></button>
<button name="btns"></button>
<button name="btns"></button>
<button name="btns"></button>
<button name="btns"></button>
<script>
// 通过页面中name属性名来对元素进行定位;
var btn = document.getElementsByName('btns')[0];
// 输出的是一个索引数组,NodeList;里面有5个button按钮;
console.log(btn);
console.log(btn instanceof NodeList); // true;
</script>
</body>
使用getElementsByClassName()方法:
<body>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<script>
// 通过页面中标签名来对元素进行定位;
var btn = document.getElementsByTagName('button')[0];
// 得到页面内标签名为button的元素;
console.log(btn);
console.log(btn instanceof HTMLCollection); // true
</script>
</body>
总结:
getElementsByName()方法
getElementsByTagName()方法
getElementsByClassName()方法
以上三种方法,在使用时后面加上[0],方便实际应用中得获取元素得正确性;