非表单元素的属性
href、title、id、src、className
var link = document.getElementById('link'); console.log(link.href); console.log(link.title); var pic = document.getElementById('pic'); console.log(pic.src);
案例：
点击按钮，切换img标签里的图片
点击按钮显示隐藏div
https://blog.csdn.net/weixin_45525272/article/details/107671639
- innerHTML和innerText
var box = document.getElementById('box'); box.innerHTML = '我是文本<p>我会生成为标签</p>'; console.log(box.innerHTML); box.innerText = '我是文本<p>我不会生成为标签</p>'; console.log(box.innerText);
- HTML转义符
" " ‘ ' & & < < //less than 小于 > > // greater than 大于 空格 © ©
- innerHTML和innerText的区别
- innerText的兼容性处理
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
案例
- 搜索文本框
https://blog.csdn.net/weixin_45525272/article/details/107671639
自定义属性操作
- getAttribute() 获取标签行内属性
- setAttribute() 设置标签行内属性
- removeAttribute() 移除标签行内属性
与element.属性的区别:上述三个方法用于获取任意的行内属性。
样式操作
- 使用style方式设置的样式显示在标签行内
var box = document.getElementById('box'); box.style.width = '100px'; box.style.height = '100px'; box.style.backgroundColor = 'red';
- 注意
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box'); box.className = 'clearfix';
案例
- 图片切换二维码案例
https://blog.csdn.net/weixin_45525272/article/details/107671639
- tab选项卡切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display: inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background-color: purple; } .bd li { height: 255px; background-color: purple; display: none; } .bd li.current { display: block; } </style> </head> <body> <div class="box" id="box"> <div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd"> <ul> <li class="current">我是体育模块</li> <li>我是娱乐模块</li> <li>我是新闻模块</li> <li>我是综合模块</li> </ul> </div> </div> <script src="common.js"></script> <script> //获取最外面的div var box=my$("box"); //获取的是里面的第一个div var hd=box.getElementsByTagName("div")[0]; //获取的是里面的第二个div var bd=box.getElementsByTagName("div")[1]; //获取所有的li标签 var list=bd.getElementsByTagName("li");//================================= //获取所有的span标签 var spans=hd.getElementsByTagName("span"); //循环遍历的方式,添加点击事件 for(var i=0;i<spans.length;i++){ //在点击之前就把索引保存在span标签中 spans[i].setAttribute("index",i);//================================ spans[i].onclick=function () { //第一件事,所有的span的类样式全部移除 for(var j=0;j<spans.length;j++) { spans[j].removeAttribute("class"); } //第二件事,当前被点击的span应用类样式 this.className="current"; //span被点击的时候获取存储的索引值 //alert(this.getAttribute("index")); var num=this.getAttribute("index");//============================== //获取所有的li标签,每个li标签先全部隐藏 for(var k=0;k<list.length;k++) { list[k].removeAttribute("class"); } //当前被点击的span对应的li标签显示 list[num].className="current"; }; } </script> </body> </html>
