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循环从0tags.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即可

猜你喜欢

转载自blog.csdn.net/cvenginner/article/details/120326157