WebAPI(2)

**

WebAPI(2) 换肤案例;表格隔行变色;表单全选和取消案例;自定义属性案例;tab栏切换;节点操作案例;兄弟节点;发布留言案例

**
一.排他思想

按钮1 按钮2 按钮3 按钮4 按钮5 **表单全选和取消案例**：

        </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;
}
}

**自定义属性案例**： 1)element.属性//内置属性 2)element.getAttribute('属性')//自定义属性

节点操作案例： 兼容性差 节点类型：nodeType 节点名称：nodeName 节点值：nodeValue 元素节点：nodeType为1 属性节点：nodeType为2 文本节点：nodeType为3（文本节点包含文字、空格、换行等） 父子兄层级关系 父级节点：node.parentNode

我是div

我是span

• 我是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才支持

1. 我是li1
2. 我是li2
3. 我是li3
4. 我是li4
5. 我是li5

*** 实际开发的写法 既没有兼容性问题又返回第一个子元素*** console.log(ol.children[0]); console.log(ol.children[ol.children.length - 1]); 下拉菜单案例：

• 微博
  • 私信
  • 评论
  • @我
• 微博
  • 私信
  • 评论
  • @我
• 微博
  • 私信
  • 评论
  • @我
• 微博
  • 私信
  • 评论
  • @我

兄弟节点 node.nextSibling//下一个兄弟节点，包含元素节点或者文本节点等等 node.previouSibling//下一个兄弟节点，包含元素节点或者文本节点等等 兼容性问题： node.nextElementSibling//下一个兄弟元素节点，找不到则返回null node.previousElementSibling//上一个兄弟元素节点，找不到则返回null 封装一个兼容性函数 function getNextElementSibling(element){ var e1=element; while(e1=e1.nextSibling){ if(e1.nodeType==1){ return e1; } } return null; } 创建节点：

• 123

document.createElement('tagName');

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]);
}
}