获取HTML元素的操作方法

作者：Gausst松鼠会 | 2024-02-18 21:12:08

踩

获取html元素

第一种（利用document对象方法）：

<body>

<div id="box">box</div>\

//获取id为box的元素

console.log(document.getElementById('box'));

//获取所有class为bar 的元素

console.log(document.getElementsByClassName('bar'));

//获取所有标签为div 的元素

console.log(document.getElementsByTagName('div'));

//获取所有 name为main 的元素

console.log(document.getElementsByName('main'));

</script>

</body>

第二种（利用document对象属性）：

var body = document.getElementsByTagName('body') [0]; //获取body元素

var html= document.getElementsByTagName('html') [0]; //获取html元素

console.log(document.body === body); //比较返回结果，输出结果:true

console.log(document.documentElement === html); // 比较返回结果,输出结果:ture

第三种（利用Element对象方法）：

<li>PHP</li><li>JavaScript</li>

<ul><li>jQuery</li></ul>

</ul>

var lis =document.getElementById('ul').getElementsByTagName('li');

console.log(lis); //输出结果:(3) [li,li,ul]

</script>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】