获取事件源

    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. 设置Android程序图标和程序标题

    修改程序名称 在/res/values/strings.xml中修改程序名称,例如: <string name="app_name">你的程序名称</string ...

  2. MathType模板不见了如何处理

    MathType是一款在编辑公式方面非常好用的软件!并广泛应用在文档编辑与期刊排版中.但是新手用户在使用MathType编辑公式时会遇到一些处理不了的状况,这个时候就需要去找一些相关的教程来解决问题. ...

  3. 转载 -- iOS中SDK的简单封装与使用

    一.功能总述 在博客开始的第一部分,我们先来看一下我们最终要实现的效果.下图中所表述的就是我们今天博客中要做的事情,下方的App One和App Two都植入了我们将要封装的LoginSDK, 两个A ...

  4. SqlAlchemy使用详解

    python之sqlalchemy创建表的实例详解 通过sqlalchemy创建表需要三要素:引擎,基类,元素 from sqlalchemy import create_engine from sq ...

  5. 概览C++之const

    1.C语言中const与 C++中的const void main() { const int a = 10; int *p = (int*)&a; *p = 20; printf(" ...

  6. SqlSession接口和Executor

    mybatis框架在操作数据的时候,离不开SqlSession接口实例类的作用.可以说SqlSession接口实例是开发过程中打交道最多的一个类.即是DefaultSqlSession类.如果笔者记得 ...

  7. EL表达式页面间传参（对象参数和普通参数）

    ${param['user.name']}.${param.name}

  8. 如何使用iOS 开发证书 和 Profile 文件

    如果你想在 iOS 设备(iPhone/iPad/iTouch)上调试, 需要有 iOS 开发证书和 Profile 文件. 在你拿到这两个文件之后,该如何使用呢? 证书使用说明: 1.  iOS 开 ...

  9. 通过python3学习编码

    简介 今天在写python程序的时候,遇到了编码问题,今天,我准备好好了解一下编码问题 ASCII编码 计算机是美国人发明的,最初只有不超过256字符需要编码,1字节能编码2**8个,所以ASCII编 ...

  10. Java使用BigDecimal解决浮点型运算丢失精度的问题

    @Test public void test1(){ System.out.print(0.05+0.01); } @Test public void test2(){ BigDecimal b1 = ...