文/michaelgbw
dom节点对于我们weber都是非常熟悉的。我们的js一系列操作基本是基于这个来操作的。那么什么是dom节点，我们先摘抄出来一段官方W3C的官方文档介绍
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
也就是说html就是个大的tree，<html></html>就是整个树的根节点，其他都是其孩子节点，而且当我们新建个html文档，什么都不写时，我们可以看到浏览器会默认接入基本的元素。
而我们的元素还分为块级元素和内联函数，简单的说就是块级元素(block)特性:总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行。
常见的块级元素有 center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul
常见的内联函数则有a , acronym , b br , cite , em , font , i , img , input , kbd , label , q , s , samp , select , small , span ,textarea , tt , u , var
还有一些可变函数，即是根据上下文来判断究竟是块级的还是内联，有,button ,del ,iframe , ins ,map , script等
这里说下一个误区，就是在内联元素中是可以插入块级元素的，而内联元素的大小也是可以通过这个来设置的,如：
<a>
<div style="width:100px;height:100px;">测试</div>
</a>
这里的a元素的大小就是通过其孩子div来设置的
好了，说了一堆，我们来具体看看js是怎么操作的dom节点的吧。
js中一切都会对象，而我们的dom也是，在document中，
常用的原生js获取元素的方法就是大概通过几种方式，我们这里和jquery中的方法放在一起比较。
<!doctype html>
<html lang="en">
<head>
<!-- 首先我们先写个基本的html结构-->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="show"></div>
<div id='test1'>
<span id="sp1"></span>
<span id="sp2">我是有id的</span>
<div class='t1_div'>
我是有class的
</div>
</div>
<div id='test2'></div>
</body>
</html>
我们这里只列出一些常见的，jquery选择器太强大，具体可参考这篇文章
| 序号 | 作用 | js | jquery |
|---|---|---|---|
| 1 | 按照元素的id获取 | document.getElementById('show') | $('#show') |
| 2 | 按照的元素的名称来查找，返回的是个数组 | document.getElementsByTagName('span') | $('span') |
| 3 | 按照元素的类来获取 | document.getElementsByClassName('t1_div') | $('.t1_div') |
| 4 | 返回当前元素中有指定标记名的子元素的数组 | document.getElementsByTagName('div')[1].getElementsByTagName('span') | $('div').eq(1).children('span') |
还有具体操作和通过js来创建元素的方法，我们就不一一介绍了
接下来我们来具体写点什么，来具体来理解下dom（为了简单我就用jq啦~）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="show"></div>
<div id='test1' style="background-color:#CAE4E4;">
<span id="sp1"></span>
<span id="sp2">我是有id的</span>
<div class='t1_div'>
我是有class的
</div>
<button id='go'>我要兄弟</button>
</div>
<br>
<div id='test2' style="background-color:#E6BEBE;"></div>
<script src='jquery/jquery-1.11.2.min.js'></script>
<script>
var html="<button class='insert'>我是新来的</button>";
var div1=$('#test1');
$('#go').click(function(){
div1.append(html);
console.log($('#test1').find('.insert'));
});
$('#test2').html(html);
$('.insert').click(function(e){
alert('i am coming!');
})
console.log($('#test2').find('.insert'));
</script>
</body>
</html>
我们发现当我们点击“我要兄弟时，会出来一个按钮，但怎么点都不alert,当我们console.log()的时候，发现是能取到元素的。。。
这要从html的dom加载开始说起了,html的dom在一次http请求直接获取到全部源码，当浏览器发现源码中有img。script的时候再发送http请求去获取，然后进行js和css等渲染，最后呈现出来，也就是说dom树已经在js中获取到了，即$('.insert').click(function(e){
alert('i am coming!');
})
这个这个获取到了所有一开始加载了的class=insert的元素
而这时用户点击事件发生后，发生了dom树的重绘，class=insert的元素还没有被监听到，自然不能获取到。而这时我们可以这样：
$("body").on("click",".insert",function(e){
alert('i am coming!');
});
//jQ1.7前还可以这样
$('.insert').live(function(e){
alert('i am coming!');
})
这下大家应该对dom有所了解了，我们接着改写代码
//html在<button id='go'>我要兄弟</button>
//加入<button id='bushow'>show</button>
$('.insert').click(function(e){
$(this).remove();
})
$('#bushow').click(function (){
console.log($('.insert').html());
});
remove后发现是undefined了吧，好的
$('.insert').click(function(e){
$(this).remove();
})
console.log()出来不是undefined了吧，这说明hide等函数并不是操作dom，只是吧这个元素display:none，用户看不到啦，但dom中确实的的确确存在哦，还有能操作哦.
好的，就分享到这里了~~
网友评论