JavaScript-dom1

获取事件源

    var div = document.getElementById("box");
    // var arr1 = document.getElementsByTagName('div');
    // var arr2 = document.getElementsByClassName('div');//h5新增
    // var arr3 = document.getElementsByName("")
    // var arr4 = document.getElementsByTagNameNS()

绑定事件

匿名绑定
        div.onclick = function () {
            }
    用函数名绑定
        // div.onclick = function fn() {
        // alert(2);
        // };
        // div.onclick = fn;
    行内绑定
        // <div onclick="fn()">aaa</div>

修改样式

div.onclick = function () {
        div.style.width = "200px";
        div.style.backgroundColor = "red";
        div.className = "aaa”;
             }

节点的访问关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问关系和操作</title>
</head>
<body>
<!--父节点-->
<!--<div class="box1">-->
    <!--<div class="box2"></div>-->
<!--</div>-->
<!--<script>-->
    <!--//节点的访问关系是以属性的方式存在的-->
    <!--//1、box1是box2父节点-->
    <!--var box2 = document.getElementsByClassName("box2")[0];-->
    <!--console.log(box2.parentNode);-->
<!--</script>-->


<!--兄弟节点-->
<!--<div class="box1">-->
    <!--<div class="box2"></div>-->
    <!--<div class="box3"></div>-->
<!--</div>-->
<!--<script>-->
    <!--//节点的访问关系是以属性的方式存在的-->
    <!--//1、box1是box2父节点-->
    <!--var box2 = document.getElementsByClassName("box2")[0];-->
    <!--console.log(box2.nextElementSibling);-->
<!--</script>-->


<!--子节点-->
<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<script>
//节点的访问关系是以属性的方式存在的
//第一个子节点
var box2 = document.getElementsByClassName("box2")[0];
console.log(box2.parentNode.firstElementChild);

//suoy子节点
console.log(box2.parentNode.childNodes);//有换行符
console.log(box2.parentNode.children);//过滤掉换行符
</script>

</body>
</html>

dom节点的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom节点的操作</title>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>


<script>
    //创建
    var aaa = document.createElement("li");
    console.log(aaa);
    var bbb = document.createElement("a");
    console.log(bbb);

    //添加
    var box1 = document.getElementsByClassName("box1")[0];
    box1.appendChild(aaa);
    box1.insertBefore(bbb,aaa); //把bbb添加再aaa标签之前

    //删除
    box1.removeChild(bbb);
    aaa.parentNode.removeChild(aaa);//自己删除自己

    //克隆
    var ccc = box1.cloneNode();  //浅克隆
    var ddd = box1.cloneNode(true);  //深克隆
    console.log(ccc);
    console.log(ddd);
</script>
</body>
</html>

dom节点属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <script>
        window.onload = function () {

            var eleNode = document.getElementsByTagName("img")[0];
            //属性的获取(不会出现在标签当中)
            //1、元素节点.属性；或者元素节点[属性]
            eleNode.src="image/guohui.png";//修改属性
            console.log(eleNode.src);
            console.log(eleNode.tagName);
            console.log(eleNode["title"]);
            console.log(eleNode["className"]);
            console.log(eleNode["alt"]);
            //2、元素节点.方法();
            //获取
            console.log(eleNode.getAttribute("id"));
            //设置
            eleNode.setAttribute("id","nihao");
            //删除
            eleNode.removeAttribute("id");
        }
    </script>
</head>
<body>
<img src="image/logo.png" class="box" title="图片" id="aaa" alt="jd"/>
</body>
</html>

案例-图片跳转

<body>
    <!--<a href="javascript">切换</a>-->
    <!--<a href="#" style="margin: 10px; display: block;">切换</a>-->
    <a href="http://www.baidu.com" style="margin: 10px; display: block;">切换</a>
    <img id="img" src="image/slogen1.png" width="400px" >
<script>
    //点击a连接，img图片切换(行内式)
    var a = document.getElementsByTagName('a')[0];
    var img = document.getElementById("img");
    a.onclick = function () {
        img.src = "image/slogen2.png";

        //return false禁止a连接跳转(href路径)
        return false;
    }
</script>
</body>

案例-显示隐藏盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏盒子</title>
    <style type="text/css">
        button {
            margin: 10px;
        }
        div {
             200px;
            height: 200px;
            background: pink;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏</button>
    <div>
        扯犊子。。。
    </div>

<script>
    //点击按钮，隐藏盒子改变文字，再点击按钮显示处理
    var btn=document.getElementById("btn");
    var div = document.getElementsByTagName("div")[0];
    btn.onclick = function () {
        //先判断btn的innerhtml的属性值
        if(this.innerHTML === "隐藏"){
            div.className = "hide";
            //修改文字(innerHTML)
            btn.innerHTML = "显示";
        }else{
            div.className = "show";
            btn.innerHTML = "隐藏";
        }
    }

</script>
</body>
</html>

常用事件调用方法

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时