DOM&控制标签的HTML&控制标签属性&搜索框的实现

• dom&控制标签的html&控制标签属性&搜索框的实现

• 、dom

        1、js代码一般放置在body内部的底部，因为js进行dom元素的操作，需要等待标签加载完以后再执行

        2、 代码从上到下执行，如果把js放在上面的话，执行到js的时候，标签还没有渲染。就会报错

        3、css加载是同步的，渲染标签的时候，会同时去找css样式，所以css放在在页面的哪一个位置都可以

        4、获取标签    通过id名获取标签 得到的是唯一的 document.getElementById('id名字')

   将获取的标签放到一个变量里   tag = document,getElementById(‘id名称’)

 

       5、绑定点击事件  on+(事件名称)（click）=function(){事件代码}

   在使用标签的时候使用id赋值的变量即可

{  }中编写事件代码

       6、 控制标签的css      获取标签.style.css样式(css样式书写方式和之前一样，只是如果样式带 有中横线，去除中横线，中横线后的首字母大写)='值';

注意；使用CSS后的值得加引号

        7、通过标签名获取标签 获取得到的是一个关联数组 即使只有一个元素，也是数组 数组不能直接接进行控制，需要选择到具体某一个进行控制 、获取标签[下标] document.getElementsByTagName() 、注意是s复数 tags.style.color='red';不能使用，因为不能对关联数组进行控制、若需要知道标签数组中的值则需要进行循环遍历一遍输出即可

       8、This指的是在这次的点击事件中被点击值

综合案例

• 、控制标签的html

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

        2、修改/新增：获取标签.innerHTML='修改以后的值' 

        3、获取： 获取标签.innerHTML

案例（交换文字位置）

 

 

• 、控制标签的属性

1. 标签的属性：所有放在标签后面的都可以称为标签的属性 <标签 k="v"></标签>
2. 控制标签的属性
3. k代表的是属性v代表的是属性对应的值
4. 增加/修改属性的值：获取标签.setAttribute('k','v');
5. 删除属性：获取标签.removeAttribute('k');
6. 获取属性的值：获取标签.getAttribute('k')
7. onmouseenter,设置鼠标移入事件
8. Onmouseleave设置鼠标移出事件

案例（鼠标移入移出）

 

搜索框的实现（综合练习）

• 选项卡&下拉菜单&抽奖

• 、选项卡

1. section标签，用法和div一样，只是语义更重了，一般用来引入大区域的内容
2. 在js中单引号和双引号使用方法一样的

案例

 

 

 

• 、下拉菜单

1. a.parentNode    选择a的父级 是唯一的;
2. a.children 选择a的子级  得到的是一个关联数组，不能直接进行控制
3. 通过数组的下标进行控制

抽奖案例