**
WebAPI(2) 换肤案例;表格隔行变色;表单全选和取消案例;自定义属性案例;tab栏切换;节点操作案例;兄弟节点;发布留言案例
**
一.排他思想
</tbody>
</table>
</div>
<script>
var j_cbAll=document.getElementById('j_cbAll');
var j_tbs=document.getElementById ('j_tb').getElementsByTagName('input');
j_cbAll.onclick=function(){
console.log(this.checked);
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].checked=this.checked;
}
}
商品 | 价钱 | |
---|---|---|
iPhone8 | 8000 | |
iPad Pro | 5000 | |
iPad Air | 2000 | |
Apple Watch | 2000 |
//
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].οnclick=function(){
var flag=true;
for(var i=0;i<j_tbs.length;i++){
if(!j_tbs[i].checked){
flag=false;
break;
}
}
j_cbAll.checked=flag;
}
}
- 我是li
- 我是li
- 我是li
- 我是li
<script>
var erweima=document.querySelector('.erweima');
//得到的是离元素最近的父级节点(亲爸爸),如果找不到父节点就返回为空
console.log(erweima.parentNode);
子节点
1.parentNode.childNodes (标准)
得到所有的节点,包括元素节点,文本节点等
2.parent.children(非标准)
// DOM 提供的方法(API)获取
var ul = document.querySelector(‘ul’);
var lis = ul.querySelectorAll(‘li’);
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
a. firstChild 第一个子节点 不管是文本节点还是元素节点
b. firstElementChild 返回第一个子元素节点 ie9才支持
- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
- 123
document.createElement(‘li’);
//添加节点
node.appendChild(child) //node父级,child子级
var ul=document.querySelector(‘ul’);
ul.appendChild(li);//默认追加到后面
node.insertBefore(child,指定元素)//在指定元素的前面
var lili=document.createElement(‘li’);
ul.insertBefore(lili,ul.children[0]);
创建元素,添加元素
简单发布留言案例:
-
{
margin: 0;
padding: 0;
}body { padding: 100px; } textarea { width: 200px; height: 100px; border: 1px solid pink; outline: none; resize: none; } ul { margin-top: 50px; } li { width: 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; }
</ul> <script>
var text=document.querySelector(‘textarea’);
var btn=document.querySelector(‘button’);
var ul=document.querySelector(‘ul’);
btn.οnclick=function(){
if(text.value=""){
alert(“您没有输入内容”);
return false;
}else {
var li=document.createElement(‘li’);
li.innerHTML=text.value;
ul.insertBefore(li,ul.children[0]);
}
}