我要评论什么是dom
什么叫做dom呢？
• dom的全称是document object model 文档对象模型，dom定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
• dom对象即为宿主对象，由浏览器厂商定义，用来操作html的css功能的一类对象和集合。不过浏览器厂商之间大部分都遵循w3c标准。
• 简单来说，dom就是用来操作html和css的，它是一系列对象的集合。
dom如何操作html
document代表整个文档，它也是一个dom元素，我们dom对html的操作，即使对html的增删改查。下面我就介绍一下dom都是如何增删改查html的。
那么我们如何查看元素节点？
我们知道css中有id、class、标签等选择器，同样，我们的document对象上也定义了很多类似的方法来查看元素节点。
document.getelementbyid(‘id’);方法是通过元素的id来选择出相对应的元素的，因为id是唯一标示，所以方法名中是element。
<div name=”demo”></div>
var div = document.getelementbyid(‘demo’);
这里同样把这个div选择出来了。
document.getelementsbyclassname(‘class’); 获取到的是一个类数组，因为很多元素都可以有一个类名。我们可以通过[]的方式来选择到具体的哪一个元素。
<div class=”demo”></div>
<div class=”demo”></div>
var div = document.getelementsbyclassname(‘div’)[1];
这样我们就可以选择到第二个div了。
不过如果我们碰到这种情况该怎么办？
<div class=”demo”></div>
<div class=”demo demo1″></div>
<div class=”demo1″></div>
我们改如何选择出来第二个div？
这里，我们的getelementsbyclassname其实后面可以填写多个类名。
var div = document.getelementsbyclassname(‘demo demo1’)[0];
这样，我们就可以选择出来第二个div了。
但是值得注意的是，ie8及以下的版本中没有这种方法。
• getelementsbytagname
document.getelementsbytagname(‘div’);这个方法是可以选择出来具体某一种元素的集合，像前面这一段就可以选择出全部的div集合，当然也是一个类数组。
这个方法所有版本的浏览器都兼容。
• getelementsbyname
document.getelementsbyname();需要注意的是，只有部分标签的name可以生效，比如表单、表单元素、img、iframe等。
<input name=”123″/>
document.getelementsbyname(‘123’)[0];
同样是选择出来一组，不过这个方法不是很常用。
• 这里面我们我们最常用的是id和tag，因为全版本都支持。
• queryselector()
• queryselectorall()
这两个方法通常放在一起说。
我们知道选择元素最强的是css，而这两个里面写的参数就是我们css选择器的写法。
document.queryselector(‘div p #demo .demo);
不过queryselector永远选择一组里面的第一个，所以返回的不是一个类数组而是一个具体的元素。
而我们如果要返回一个类数组的集合的话，那么就用第二个queryselectorall()方法。
不过这两个方法的问题在于，他们返回的不像前面四个是一个实时改变的元素，而是一个副本。当我们用这两个方法选择出来元素之后，我们把本身那个元素修改一下，会发现我们选择出来的那个元素没有变化。
<div class=”content”>111</div>
<div class=”content”>222</div>
<div class=”content”>333</div>
<div class=”content”>222</div>
<div class=”content”>333</div>
var div = document.queryselectorall(‘.content’);
var div1 = document.getelementsbyclassname(‘content’)[0];
console.log(div);
div1.remove();
console.log(div);
var div1 = document.getelementsbyclassname(‘content’)[0];
console.log(div);
div1.remove();
console.log(div);
我们发现两次打印出来的都是[div.content, div.content, div.content]，也就是说我们实际删除的那个元素对用queryselector选择出来的那个副本没有影响。
不过，在ie7及以下的版本没有这两个方法。
我们以后提到的jquery里面的选择器，虽然是基于sizzle的，但是sizzle是基于queryselector写的。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论