JavaScript的基本语法已经了解了，直接看Dom的相关例子来学习对document的操作。 Dom的原生使用不是太多，一般情况下使用JQuery更加简单，不过Dom的基本方法还是需要了解一下的。



例1 请输入关键字栏目


知识点：

  • javascript是默认的脚本语言，因此type='text/javascript可有可无；

  • 这里绑定了2个事件，onfocus聚焦，onblur 脱离焦点，他们各自调用一个函数来实现对应的逻辑功能

  • 获取标签的方式有两大类：1)直接获取，比如getElementById, getElementsByTagName, getElementsByClassName; 2) 间接获取，比如通过parentElement，children去搜索父亲节点，兄弟节点等等

  • 文件内容的操作： 对于文件内容，我们可以通过innerText或者innterHTML去获取和赋值，他们的区别在于前者仅仅获取文本，后者是全部内容（比如A标签等等）

  • 对于input的内容，我们可以通过value获取和赋值

  • 这个例子针对的是旧版浏览器，如果是新版的浏览器，我们可以直接使用






    
    


    
    
    
        function Focus(){
            //console.log('Focus');
            //获取标签，清空
            var  tag = document.getElementById('i1');
            if(tag.value == "请输入关键字"){
                tag.value = "";
            }
        }
        function Blur(){
            //console.log('blur');
            var  tag = document.getElementById('i1');
            var val = tag.value;
            if(val.trim().length == 0){
                tag.value = "请输入关键字";
            }
        }
    


效果如下 如果光标不在里面，就显示请输入关键字，否则变为空白


wKioL1h-2aiCQOHlAAAmZmCoAUA677.jpg


例2 模拟对话框


知识点：

  1. shade层是在最下面，modal层是上面，因此后者的z-index数值比较大；

  2. 居中表示的方法，top，left各50%之后再移动一半的尺寸；

  3. tag.classlist可以对一个标签的class进行添加或者删除，因此中间那个窗口其实一直在，只不过隐藏起来而已；在dom中，我们可以通过className, classList.add, classList.remove来选择样式；也可以通过 obj.style.fontsize, obj.style.color这种方式来细微条件，还有可以通过getAttribute, setAttribute, removeAttribute来操作属性

  4. windows.onkeydown触发一个按键的事件，他的值keycode可以在console.log里面进行查看