获取事件源

    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="data: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="data: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="data: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 {

            width: 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

重置表单时
 
 
 
 
 
 
 
 

JavaScript-dom1的更多相关文章

  1. javaScript——DOM1级，DOM2级，DOM3级

    DOM0,DOM2,DOM3事件处理方式区别:http://www.qdfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html JS中do ...

  2. JavaScript之Dom1|DOM2|DOM3之DOM1【节点层次】

    长文慎读. 导航: 1.节点层次 2.Node类型 3.Document类型 4.Element类型 5.Text类型 6.Comment类型 7.CDATASection类型 8.DocumentT ...

  3. javascript and dom1

    <script type="text/javascript"> //数组 var beatles=Array(4); var beatles=Array(); cons ...

  4. JavaScript Dom0 Dom1

    行为 样式 结构相分离的页面 JS        CSS       HTML DOM 0写法 <!DOCTYPE html> <html lang="en"&g ...

  5. 一步步学习javascript基础篇（8）：细说事件

    终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...

  6. 【转】浅谈JavaScript、ES5、ES6

    什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...

  7. 深入理解JavaScript系列：JavaScript的构成

    此篇文章不是干货类型,也算不上概念阐述,就是简单的进行一个思路上的整理. 要了解一样东西或者完成一件事情,首要的就是先要搞清楚他是什么.作为一个前端开发人员,JavaScript应该算作是最核心之一的 ...

  8. JavaScript和DOM的产生与发展

    首先本篇文章摘自:http://itbilu.com/javascript/js/Vyxodm_1g.html 非常感谢本篇文章的作者,他理清了我映像中混乱的DOM Level级别.让我知道了DOM0 ...

  9. Javascript高级程序设计——javascript简介

    1.Javascript简史 javascript诞生于1995年,是由网景公司的Brendan Eich开发的,最初的目的是在客户端处理一些输入验证操作,自此后成为常见浏览器的特色功能,如今用途已经 ...

  10. javascript笔记6-DOM

    DOM(文档对象模型)是针对HTML和XML文档的一个API.DOM描绘了一个层次化的节点树,允许程序员添加.修改页面的一部分. 节点层次:DOM可以将任何HTML或XML文档描绘成一个由多层次节点构 ...

随机推荐

  1. oracle中恢复删除的表

    1.表恢复,如果在删除表的同时删除的数据,那么表恢复也能恢复当时删除时的数据 -----查询删除的表 select * from recyclebin order by droptime desc - ...

  2. hdu 1115:Lifting the Stone（计算几何，求多边形重心。 过年好！）

    Lifting the Stone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  3. ORACLE之常用FAQ V1.0

    [B]第一部分.SQL&PL/SQL[/B][Q]怎么样查询特殊字符,如通配符%与_[A]select * from table where name like 'A\_%' escape ' ...

  4. THINKPHP5加载公共头部尾部模板方法

    之前在3.2中用 <include file="public/header" /> 后来发现在thinkphp5中应该这样写才行 {include file=" ...

  5. iOS开发之-- 从当前隐藏导航界面push到下一个显示导航界面出现闪一下的问题

    在修改项目代码的过程中,遇到一个问题,就是比如主页面的导航栏是隐藏的,但是需要push到别的页面,这个时候,会出现导航栏闪一下的情况, 下面是我写的一种方案,也就是在loadView这个生命周期函数中 ...

  6. C语言逻辑运算符

    现在假设有这样一种情况,我们的软件比较特殊,要求使用者必须成年,并且成绩大于等于60,该怎么办呢? 或许你会想到使用嵌套的 if 语句,类似下面这样的代码: #include <stdio.h& ...

  7. Lua中 MinXmlHttpRequest如何发送post方式数据

    local xhr=cc.XMLHttpRequest:new() xhr.responseType=cc.XMLHTTPREQUEST_RESPONSE_JSON xhr:open(“POST”,& ...

  8. 《C++ Primer Plus》第8章 函数探幽 学习笔记

    C++ 扩展了 C 语言的函数功能.通过将 inline 关键字用于函数定义,并在首次调用该函数前提供其函数定义,可以使得 C++ 编译器将该函数视为内联函数.也就是说,编译器不是让程序跳到独立的代码 ...

  9. poj_1860 SPFA

    题目大意 有N种货币,M个兑换点,每个兑换点只能相互兑换两种货币.设兑换点A可以兑换货币C1和C2,给出rate(C1--C2)表示1单位的C1货币可以兑换出的C2货币数目,rate(C2--C1)表 ...

  10. js 中导出excel 较长数字串会变成科学计数法（转载）

    在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...