JS--------DOM
一、DOM改变网页的内容、结构、样式
二、文档：一个页面就是一个文档，DOM中用document表示；
元素：页面中所有标签都是元素，DOM中用element表示；
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node;
DOM把以上内容都看作对象；
三、获取元素
1：如何获取页面元素
{
《1》根据ID获取；getElementByID（‘’） document.getElementByID('');
《2》根据标签名获取：document.getElementByTagName('标签名、元素名');
《3》通过HTML5新增的方法获取：{
document.getElementByClassName('类名')；
document.querySelector('选择器')：得到第一个元素对象
例如：
<html>
<head>
<title>Title</title>
<script>
var q=document.querySelector('#a');
var w=document.querySelector('.b');
var e=document.querySelector('li');
</script>
</head>
<body>
<div id="a"></div>
<div class="b"></div>
<li></li>
</body>
</html>
document.querySelectorAll('选择器');
}
《4》获取特殊元素：（body、html）
获取body：document.body
获取html：document.getElement
}
四：事件基础
只有用如上方法获取了元素，才能对元素进行一些操作
步骤：
《1》获取事件源（获取元素）
《2》事件类型（如何触发什么事件 例如;鼠标点击）
《3》事件处理程序，通过一个函数赋值的方式完成；
例如：
<html>
<head>
<title>Title</title>
<script>
var q=document.querySelector('#a');
q.onclick=function () {
alert('棒棒哒');
}
</script>
</head>
<body>
<div id="a"></div>
</body>
</html>
五、常见的鼠标事件
onclick----------------------鼠标点击触发
onmouseover-------------------鼠标经过触发
onmouseout-----------------------鼠标离开触发
onfocus-----------------------------获得鼠标焦点触发
onblur-----------------------------失去鼠标焦点触发
onmousemove------------------鼠标移动触发
onmouseup----------------------鼠标弹起触发
onmousedown-------------------鼠标按下触发
六、操作元素
1、改变元素内容
方法一：element.innerText
当点击按钮时，div中的内容会改变
1：获取元素{
btn
div
}
2:注事件：
btn.onclick=function(){
div.innerText="2019-09-09"：
}
获取当前时间
var date=new Data();
var year=date.getFullYear();
var month=date.getMonth();
var dates=date.getDate();
var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var day=date.getDay();
把如上内容放到一个函数中，调用函数
改变谁的内容谁=修改的内容
方法二：innerHTML（使用较多）
二者区别 innerText不识别HTML标签
七、操作元素
《一》样式属性操作
可以通过js来修改元素的大小、颜色、位置等样式
1：修改元素样式有两种方式
{
element.style (元素.style)：行内样式操作
元素.className：类名样式操作
className会覆盖原来的类
}
2：既保留原来的类，又有新的类
.className='原类名 空格 新类名'
八、排他思想
排他思想：如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1：所有元素全部清除样式；
2：给当前元素设置样式；
3：注意顺序不能颠倒；
浙公网安备 33010602011771号