dom元素初识

Dom元素

        1.书写script的位置

代码从上到下执行，如果把js放在上面的话，执行到js的时候，标签还没有渲染就会报错css加载是同步的，渲染标签的时候，会同时去找css样式，所以css放再页面的哪个为位置都可以

        2.dom获取标签

通过id名获取标签，得到的是唯一的 document.getelementById("id名称")

然后用一个变量把获取到的标签存储起来就可以使用

        3.绑定点击事件

获取标签.on+事件类型（click点击）=function(){}

函数里面写点击之后的触发的事件

        4.控制标签的css。

获取标签.style.css样式和css样式的书写方式和之前一样，只是如果样式中带有中横线，去除中横线后的首字符变大写)="值"注：不能使用因为不能对关联数组进行控制

 

案例：点击按钮后改变按钮的css样式

 

 

 

        5.通过标签名获取标签，

document.getElementByTagName("标签名");

获得到的是一个关联数组，即使只有一个元素也是数组，数组不能直接控制，需要选择到具体的某一个进行控制

案例：使得所有的li里的文字都变成指定的颜色

 

 

把点击事件和获取标签节点一起使用

案例：点击之后的li变色

 注：for循环从0到tags.length在执行的时候直接执行了，并且给所有的tags绑定了点击的样式，如果在点击里面在写i就会变成tags.length+1，找不到该元素，所以要用this去获取到用户点击的标签索引

在这个基础上发现，点击之后的样式不会变回去不符合预期，但是无法获取到上一次用户点击的标签索引，所以进行排他操作，在点击之前把所有的标签的样式去除

 

通过JavaScript修改/新增标签内容

在js中标签的html指的是标签开始和结束中间的内容

获取标签.innerHTML="修改后的值"

获取标签.innerHTML

案例：点击按钮交换标签里的内容

 

 

 

 通过JavaScript控制标签的属性

增加/删除属性：获取标签.setAttribute("k","v");

删除属性:获取标签,removeAttribute("k","v");

获取属性的值:获取标签：getAttribute("k","v")

onmouseenter是鼠标移入

onmouseleave是鼠标移出

案例：鼠标移入后把圆形变成方形

 

把鼠标移入添加样式和文本替换结合的案例 

使用定时器完成抽奖的程序

setInterval(function(){

执行的代码

}，时间） 每隔一段时间执行代码

 

控制表单元素的值

        获取值：获取标签.value

        修改值：获取标签.value="值"

创建一个标签

document.createElement("标签");

 

综合案例：轮播图

Css部分

Html部分 

 

Js部分：

1.开启计时器，按 往右移动图片的像素达到切换图片

2.鼠标移入关闭定时器，鼠标移出开启定时器

 3.给下面的ul小圆点添加鼠标移入切换样式

4.添加for循环排他去除已经变色的原点

5.给小圆点绑定点击事件点击到特定图片

6.给左右按钮绑定点击事件，使得能切换图片，往右切换定时器的轮播图一样，往左的按钮只需要把自增改成自减，循环到小于0的时候回到3即可