1. DOM 分为三个部分：DOM core ,HTML_DOM,CSS_DOM；
1.1.document.getElementById(),document.getElementsByTagName,getAttribute(),setAttribute() 这些方法属于DOM core
1.2. docuement.froms // HTML_DOM获取一个表单对象
element.src //HTML_DOM获取元素的src属性
类似这样的属于HTML_DOM
1.3.CSS_DOM针对CSS操作，CSS_DOM主要用于获取和设置style对象的各种属性
例如：element.style.color = "red" ; 设置元素的color属性
2. 查找节点：
2.1 查找元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<script>
$(function() {
var $li = $("ul li:eq(1)");
var li_txt = $li.text();
console.log(li_txt);
});
</script>
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子" class="shuoguo2">梨子</li>
<li title="香蕉" class="shuoguo3">香蕉</li> </ul>
</body>
</html>
2.2.1 查找属性节点
<script>
$(function() {
var $li = $("ul li:eq(1)");
var li_txt = $li.class;
console.log(li_txt);
});
</script>
运行结果错误：
上面的原因：写法错误，jquery的对象不能直接调用js的属性，要使用jquery的方法来调用
改正为
<script>
$(function() {
var $li = $("ul li:eq(1)");
var li_txt = $li.attr('class');
console.log(li_txt);
});
</script>
结果：
2.2.2 设置属性节点
$(function() {
var $li = $("ul li:eq(1)");
$li.attr({"data_title": "lizi","my_name": "huanying2015"});
});
运行结果：
类似 attr() 方法的还有一些，例如：html(),val(),height(),width(),text(),css()等
2.2.3 删除属性
$(function() {
var $li = $("ul li:eq(1)");
$li.removeAttr("title");
});
运行结果：
设置属性和删除属性，还可以使用prop()和removeProp() 方法进行，与attr()和removeAttr()类似
2.2.4 设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子">梨子</li>
<li title="香蕉" class="shuoguo3">香蕉</li>
</ul>
</body>
</html>
<script>
$(function() {
var $li = $("ul li:eq(1)");
// $li.attr("class", "nihao");
$li.addClass("nihao");
});
</script>
运行结果：attr()和addClass()当没有样式时，结果是一样的，就是上面的两种方式；
当存在一个样式时，addClass可以进行追加样式：在nihao 的基础上追加一个 huanying2015 样式
<script>
$(function() {
var $li = $("ul li:eq(1)");
$li.attr("class", "nihao");
$li.addClass("huanying2015");
});
</script>
运行结果：
2.2.5 对样式进行切换：toggleClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<style>
.nihao {
background: red;
}
</style>
<script>
$(function() {
var $li = $("ul li:eq(1)");
var Obtn = $(".btn");
Obtn.on('click', function() {
$li.toggleClass('nihao');
});
});
</script>
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子">梨子</li>
<li title="香蕉" class="shuoguo3">香蕉</li>
</ul>
<input type="button" value="切换" class="btn">
</body>
</html>
在第20行执行样式切换，运行结果：
2.2.6 判断元素是否拥有某个属性：hasClass()，现在li:eq(1)中添加属性 huanying2015
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子" class="huanying2015">梨子</li>
<li title="香蕉" class="shuoguo3">香蕉</li>
</ul>
<input type="button" value="切换" class="btn">
</body>
</html>
<script>
$(function() {
var $li = $("ul li:eq(1)");
var O_has = $li.hasClass("huanying2015");
console.log(O_has);
});
</script>
运行结果：
2.2.7 获取元素的内容：html()和text() 的区别
<body>
<p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>
<ul>
<li title="苹果" class="shuoguo1">苹果</li>
<li title="梨子" class="huanying2015"> <strong>这是一个梨子</strong></li>
<li title="香蕉" class="shuoguo3">香蕉</li>
</ul>
<input type="button" value="切换" class="btn">
</body>
<script>
$(function() {
var $li = $("ul li:eq(1)");
var O_html = $li.html();
var O_text = $li.text();
console.log(O_html);
console.log(O_text);
});
</script>
运行结果：html()会把strong标签也打印出来，text()只打印文本内容
