【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day03

传智播客温馨提示：前几天我们学习过了Html、Css、JS的基本语法及使用，本节我们需要利用之前学习过的知识掌握Js控制样式。

隔行变色
childNodes:子节点，元素子节点的 NodeList。

[CSS] 纯文本查看 复制代码

 <style>
.even {
background-color: #999;
}

.odd {
background-color: #ccc;
}
</style>

[JavaScript] 纯文本查看 复制代码

/**        *@author 传智播客
        */
    var ul = document.getElementById("list");
    //var lis = ul.getElementsByTagName("li");
    //层级结构 childNodes 子节点
    var children = ul.childNodes;
    var j = 0;
    for (var i = 0; i < children.length; i++) {
        if (children.nodeType === 1) {//元素节点
            if (j % 2 === 0) {//索引是偶数 在页面上是奇数
                children.className = "odd";
            } else {
                children.className = "even";
            }
            j++;
        }
    }

节点属性
节点分为属性节点、文本节点、元素节点、注释节点。

节点的信息：

nodeName   标签名，属性名 #text #   document

nodeType   节点类型

nodeValue  属性值，文本值，元素不可用

[JavaScript] 纯文本查看 复制代码

        /**
        *@author 传智播客
        */
//查找元素
    var ul = document.getElementById("list");
//获取元素的子节点
    var children = ul.childNodes;
    var j = 0;
    for (var i = 0; i < children.length; i++) {
        if (children.nodeType === 1) {
            if (j % 2 === 0) {//取余
                children.className = "odd";
            } else {
                children.className = "even";
            }
            j++;
        }
    }
    //节点常用的属性 nodeType nodeValue nodeName
    //文本节点
    /*console.log(children[0].nodeType);//3
     console.log(children[0].nodeValue);//文本节点的内容
     console.log(children[0].nodeName);//#text*/
    //元素节点
    /*console.log(children[1].nodeType);//1
     console.log(children[1].nodeValue);//元素节点的值都是null
     console.log(children[1].nodeName);//标签名*/
    //注释节点
    /*console.log(children[3].nodeType);//8
     console.log(children[3].nodeValue);//注释的内容
     console.log(children[3].nodeName);//#comment*/
    //console.log(children);
    //属性节点
    var attrNode = ul.getAttributeNode("id");
    console.log(attrNode.nodeType);//2
    console.log(attrNode.nodeValue);//属性值
    console.log(attrNode.nodeName);//属性名

菜单切换
下面我们利用排他思想和元素属性来做一个菜单切换的案例

[JavaScript] 纯文本查看 复制代码

        /**
        *@author 传智播客
        */
    //找人
    var ul = document.getElementById("list");
    var nodes = ul.childNodes;
    //给每一个li注册事件 点击当前li排他
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes;//每个节点
        if (node.nodeType !== 1) {//1是元素节点 不等于1就不是元素节点
            continue;
        }
        node.onclick = function () {
            //排他
            //干掉所有人
            for (var i = 0; i < nodes.length; i++) {
                var node = nodes;
                if (node.nodeType !== 1) {//不是元素节点
                    continue;
                }
                node.className = "";
            }
            //留下我自己
            this.className = "current";
        };
    }

下面给大家介绍另一个属性element.children ，表示所有的子元素。因为返回的是元素节点，所有我们就不用像之前一样手动的去判断是不是元素节点了

[JavaScript] 纯文本查看 复制代码

        /**
        *@author 传智播客
        */    
var ul = document.getElementById("list");
    //ul.childNodes;//子节点
    //console.log(ul.children);//子元素
    var lis = ul.children;
    for (var i = 0; i < lis.length; i++) {
        lis.onclick = function () {
            //干掉所有人
            for (var i = 0; i < lis.length; i++) {
                lis.className = "";
            }
            //留下我自己
            this.className = "current";
        };
    }

random
random() 方法可返回介于 0 ~ 1 之间的一个随机数。

产生 0123 中的一个随机数

[JavaScript] 纯文本查看 复制代码

        /**
        *@author 传智播客
        */ 
//产生 0123 中的一个随机数
  var random = parseInt(Math.random() *3);

表单验证
onkeyup 键盘弹起事件   onkeydown 键盘按下事件nextSibling 下一个兄弟节点  nextElementSibling 下一个兄弟元素，ie678不支持

[JavaScript] 纯文本查看 复制代码

        /**
        *@author 传智播客
        */ 
        //找人
        var txtName = document.getElementById("txtName");
        var txtPwd = document.getElementById("txtPwd");
        //用户在文本框中输入内容的时候 判断用户名是否符合要求
        //onkeyup 键盘弹起事件 onkeydown 键盘按下事件
        txtName.onkeyup = function () {
                //如果用户名太短或者太长都要提示错误
                if (this.value.length < 3 || this.value.length > 6) {
                        //nextSibling 下一个兄弟节点
                        this.nextSibling.innerHTML = "用户名必须在3-6位之间";
                } else {
                        this.nextSibling.innerHTML = "";
                }
        };
        txtPwd.onkeyup = function () {
                //如果用户名太短或者太长都要提示错误
                if (this.value.length < 3 || this.value.length > 6) {
                        //nextSibling 下一个兄弟节点
                        //nextElementSibling 下一个兄弟元素
                        this.nextElementSibling.innerHTML = "密码必须在3-6位之间";
                } else {
                        this.nextElementSibling.innerHTML = "";
                }
        };
    //获取下一个兄弟元素的兼容函数
    function getNextElement(element) {
        if (element.nextElementSibling) {
            return element.nextElementSibling;
        } else {
            var next = element.nextSibling;//下一个兄弟节点
            while (next && next.nodeType !== 1) {//一直往后找的条件 1有 2不是我要的
                next = next.nextSibling;//继续往后找兄弟节点
            }
            return next;
        }
    }

style属性
style属性是个对象 这个对象里的属性 和CSS 基本一致
获取元素宽度：element.style.width；//style属性对应的是标签的style属性,对应的是行内的样式属性,并且是字符串，有单位
设置元素宽度： element.style.width ;//注意需要加单位
设置元素位置：element.style.left；//需要加定位才能设置left、top、right、bottom

设置元素背景色：element.body.style.backgroundColor；
设置元素的层级：element.style.zIndex；
隐藏元素：element.style.display； //消失之后 不占位置
隐藏元素：element.style.visibility；//消失之后 占位置

设置当前元素高亮
onfocus：获取焦点  onblur：失去焦点

[JavaScript] 纯文本查看 复制代码

        /**
    *@author 传智播客
    */ 
    var inputs = document.getElementById("box").getElementsByTagName("input");
    //给每一个文本框绑定事件 获取焦点的 加背景色 失去焦点的 去掉背景色
    for (var i = 0; i < inputs.length; i++) {
        inputs.onfocus = function () {
            this.style.backgroundColor = "red";
        };
        inputs.onblur = function () {
            this.style.backgroundColor = "";
        };
    }

透明度
关于透明度我们先简单了解一下，之后的讲解中会再次涉及到。
IE678不支持*//*不影响内部元素的透明度
background-color: rgba(120, 0, 0, 0.5); /!*取值范围0-1 0是透明 1不透明*!/
IE678不支持*//*影响内部元素的透明度
opacity: 0.5;/!*取值范围0-1 0是透明 1不透明*!/
只有IE678支持
filter: alpha(opacity=50);/!*取值范围0-100 0是透明 100不透明*!

今天的讲解到此结束，如果小伙伴们还有什么不懂的可以在下方留言，或者去黑马程序员官网下载最新资料进行学习---http://www.itheima.com/

这是凯哥写的吧，厉害，条理清晰