DOM操作innerHTML
针对于非表单控件
// 3.1 支持标签,可以解析标签
// oDiv.innerHTML 获取内容
// oDiv.innerHTML = "<b></b>" 设置内容
// 3.2 不支持标签,可以解析标签
// oDiv.innerText 获取内容
// oDiv.innerText = "" 设置内容
// 针对表单控件
// oDiv.value 获取内容
// oDiv.value = "" 设置内容
非表单
var oDiv = document.querySelector('div');
// oDiv.innerHTML = '<b>我是新增的内容</b>'
// oDiv.innerText = '<b>我是新增的内容</b>'
表单
var oIpt = document.querySelector('input')
// console.log(oIpt.value);//获取
oIpt.value = '我是新增的内容'
DOM操作inner案列
// 数组元素是对象
var arrjson = [{"name":"张三","age":18,"sex":"男"},{"name":"李四","age":18,"sex":"男"},{"name":"张三","age":18,"sex":"男"}]
需求:将对象渲染成表格,几个对象就让它展示几行(tr),几个键值对就让他展示几个列(td)
1. 如何确定有几个对象:数组;里面有几个元素,就是几行
遍历数组,循环了多少次,代表有几行
2. 通过循环,可以确定有多少行和多少列,拼接出一个 形如 <tr><td></td><td></td><td></td></tr>这样的字符串结构
3. 将拼接好的字符串 设置给tbody的innerHTML 就会动态的产生表格
<body>
<table border="1px">
<tbody>
</tbody>
</table>
</body>
var oBody = document.querySelector('tbody')
console.log(oBody.innerHTML); //获取内容:‘’
var trhtml = ''
for(var i = 0;i<arrjson.length;i++){
// 循环了几次,就产生了几个tr。tr内部直接放上3个td
trhtml+='<tr><td>'+arrjson[i].name+'</td><td>'+arrjson[i].age+'</td>
<td>'+arrjson[i].sex+'</td></tr>'
}
// 拼接了几对<tr></tr>?循环了几次就拼接了几对
// arrjson[0]:{"name":"张三","age":18,"sex":"男"}
// arrjson[1]:{"name":"李四","age":18,"sex":"男"}
console.log(trhtml);
oBody.innerHTML = trhtml;//設置内容
自定义属性
属性分为自定义属性和固有属性
自定义属性:自己定义的属性(定义的可以是自己命名的,也可以是有生具来的 src,type,href)
设置自定义属性: oDiv.setAttribute('xx','yy')
设置获取属性: oDiv.getAttribute('xx')
设置删除属性: oDiv.removeAttribute('xx')
var oDiv = document.querySelector('div')
oDiv.setAttribute('xx',"yy");//给div设置一个自定义的属性xx,值yy
console.log(oDiv.getAttribute('xx'));//获取odiv自定义属性xx的值
oDiv.removeAttribute('xx')
选项卡案例
<style>
div {
width: 300px;
height: 80px;
background-color: pink;
}
.active {
background-color: orange;
font-size: 30px;
}
</style>
<body>
<input type="button" value="教育" class="active">
<input type="button" value="娱乐">
<input type="button" value="体育">
<div></div>
</body>
<script>
/*
点击谁,div的内容就是点击那个下标对应的数组内容
*/
var oBtns = document.querySelectorAll('input')
var oArrs = ['教育内容', '娱乐内容', '体育内容'];
var oDiv = document.querySelector('div')
for (var i = 0; i < oBtns.length; i++) {
oBtns[i].setAttribute('index', i);//给每一个btn添加点击自定义属性
oBtns[i].onclick = function () {
for (var j = 0; j < oBtns.length; j++) {
oBtns[j].removeAttribute('class')
}
// console.log(this.getAttribute('index'));//点谁拿谁的自定义属性index值
console.log(oArrs[this.getAttribute('index')]);
this.setAttribute('class', 'active')
oDiv.innerHTML = oArrs[this.getAttribute('index')];
}
}
</script>
DOM操作固有属性
固有属性:src type,href checked
设置固有属性:oImg.src = '路径' oIpt.checked = true
获取固有属性:oImg.src oIpt.checked
checked:js控制复选框的选中
oIpt.checked = true
js控制复选框的取消选中
oIpt.checked = false
var oIpts = document.querySelectorAll('input')
for(var i = 0;i<oIpts.length;i++){
oIpts[i].checked = true;//全部选中
}
var oImg = document.querySelector('img')
oImg.src = './img/2.jpg';//设置固有属性
console.log(oImg.src);
开关灯案列
<style>
body {
background-color: #000;
}
</style>
</head>
<body>
<button>
开灯
</button>
</body>
<script>
/*
第一次点击按钮,
背景变黄色
按钮变成关灯
第二次点击按钮,
背景变嘿色
按钮变成开灯
通过flag 来控制
点击一次,flag的值变成相反的状态
*/
var flag = true
var oBtn = document.querySelector("button")
oBtn.onclick = function () {
flag = !flag;//第一次点击时,flag为false,走的else的程序。下一次点击的时候flag为true,走的是true的程序
if (flag) {
document.body.style.background = 'black'
this.innerHTML = '开灯'
} else {
document.body.style.background = 'yellow'
this.innerHTML = '关灯'
}
}
跟换背景案例
<body>
<img src="../img/1.jpg" alt="" width="100px">
<img src="../img/2.jpg" alt="" width="100px">
<img src="../img/3.jpg" alt="" width="100px">
</body>
<script>
/*
点击谁,页面body的背景就是谁
*/
var oImgs = document.querySelectorAll('img')
for (var i = 0; i < oImgs.length; i++) {
oImgs[i].onclick = function () {
console.log(this.src);
// 获取body
document.body.style.background = 'url('+this.src+')'
}
}
全选和取消全选案例
<body>
<button>全选</button>
<button>取消全选</button>
<button>全选</button>
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
</body>
<script>
var oBtns = document.querySelectorAll('button')
var oIpts = document.querySelectorAll('input')
oBtns[0].onclick = function () {
for (var i = 0; i < oIpts.length; i++) {
oIpts[i].checked = true
}
}
oBtns[1].onclick = function () {
for (var i = 0; i < oIpts.length; i++) {
oIpts[i].checked = false
}
}
/*
点击按钮。,
第一次
全部选中
按钮变成取消全选
第一次
取消选中
按钮变成全选
*/
var flag = true;
oBtns[2].onclick = function () {
flag = !flag;
if (flag) {
for (var i = 0; i < oIpts.length; i++) {
oIpts[i].checked = false;
}
// this 当前点击元素
this.innerHTML = "全选"
} else {
for (var i = 0; i < oIpts.length; i++) {
oIpts[i].checked = true;
}
// this 当前点击元素
this.innerHTML = "取消全选"
}
}
</script>