Dom
Dom即Document Object Model (文档对象模型),Dom定义了表示和修改文档所需的方法。DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合,也有人称DOM是对html以及xml的表追编程接口。
JavaScript进入Dom阶段是JS通过一些方法来增删改查html文档。
Dom选择器
Dom选择器有许多种,主要是基于JS对Html查结构。
ID选择器
通过进行查找html文档中的ID选中。(注:IE8以下的浏览器,不区分大小写,也可以访问name名)。
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<div id = "only">
</body>
<script type="text/javascript">
var div = document.getElementById('only');
console.log(div);
</script>
</html>
标签名选择器
用标签名选择器查找的是html文档里的标签,所得到的是类数组形式。(一切由系统生成组的基本上全是类数组)。
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<div id = "only">
<div></div>
<div></div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div');
console.log(div);
</script>
</html>
name选择器
所有有name属性的标签都可以,老版本只有部分name标签可以生效(表单,表单元素,img,iframe),生成的也是一组数。
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<input type="" name="myName">
</body>
<script type="text/javascript">
var input = document.getElementsByName('myName');
console.log(input);
</script>
</html>
类选择器
通过查找标签的class属性查到,IE8及IE8以下的IE版本都没有。查到的也是类数组。
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<div class = "demo"></div>
</body>
<script type="text/javascript">
var div = document.getElementsByClassName('demo');
console.log(div);
</script>
</html>
css选择器
通过标签的层级来选择,特别方便,但是缺点很大:唯一的缺点就是不是实时性,是静态的。就是如果你选出来一个元素,如果你下次删除这个元素,在这个选择器上还是有。IE7及IE7以下都没有。
querySelector/querySelectorAll
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<div>
<span>
<strong></strong>
</span>
</div>
</body>
<script type="text/javascript">
var strong = document.querySelector('div > span > strong');
console.log(strong);
var strong1 = document.querySelectorAll('div > span > strong'); // 选出一组。
console.log(strong1);
</script>
</html>
在运用Dom选择器的时候灵活运用,避免各个选择器的缺点。
JavaScript语言我个人感觉是最有意思的了,我也是一个初学者,遇到问题,喜欢在博客上分享,也希望能帮到大家。
一个初学者,有什么不足或者纰漏的话,希望在下面评论出来,相互学习,共同进步。
--主页传送门--