获取事件源

    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. ThinkPHP项目笔记之函数篇

    说到函数,可能有人会想:框架的C(控制器)通牌都是函数构成的,没有必要讲吧. 当然,我要说的是,公共函数:function.php,该文件就是为了开发一下功能准备的,比方说,某个功能,a地方可用,b地 ...

  2. hrbustoj 1104:Leyni, LOLI and Line（解析几何，斜截式的应用）

    Leyni, LOLI and Line Time Limit: 1000 MS    Memory Limit: 65536 K Total Submit: 181(54 users)   Tota ...

  3. selenium基础框架的封装(Python版)这篇帖子在百度关键词搜索的第一位了，有图为证，开心！

    百度搜索结果页地址:https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=se ...

  4. 自学Ajax

    使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML,取决于返回值). $.get(" ...

  5. 模拟http请求 带 chunked解析办法一

    今天在干坏事抓取别人页面时候遇到一个问题,平时我们在post数据后,大不了要求提交cookie,但是今天这个测试了N遍不需要coookie都行的,但是抓取到的始终是乱码,怎么解析都不行.于是自己又把c ...

  6. IDEA整合日志框架Log4j2+Slf4j详细配置过程

    日志框架这么多,他们之间到底是什么关系呢?笼统的讲就是slf4j是一系列的日志接口,而log4j2.logback是具体实现了接口功能的日志框架.现在的主流日志接口都使用slf4j,而日志的实现就见仁 ...

  7. ThreadLocal分析总结：

    1.ThreadLocal 是什么 它是一个数据结构,像 HashMap,可保存 "key : value" 键值对:ThreadLocal 有一个内部类ThreadLocalMa ...

  8. hibernate的日期映射

    2. 映射 Java 的时间, 日期类型 1). 两个基础知识: I. 在 Java 中, 代表时间和日期的类型包括: java.util.Date 和 java.util.Calendar. 此外, ...

  9. [iOS微博项目 - 4.0] - 自定义微博cell

    github: https://github.com/hellovoidworld/HVWWeibo A.自定义微博cell基本结构 1.需求 创建自定义cell的雏形 cell包含:内容.工具条 内 ...

  10. 【tensorflow】

    运行计算图 session.run() https://blog.csdn.net/sinat_39372048/article/details/80868168 赋值 tf.assign() tf. ...