获取事件源

    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. 在化学教学中怎么用ChemOffice

    在21世纪新课程化学教学中,有很多地方要求化学教师使用计算机和应用程序处理各类化学信息,比如课堂教学.撰写教学论文.制作多媒体课件等,这样可以有效增强教学效果.作为化学教师,在新课程的化学教学中掌握一 ...

  2. 电脑端与iPad 端如何共享ChemDraw结构

    在日常生活中,我们使用的电脑会有好几种系统,很多的软件不能做好各个系统的兼容.但是ChemDraw软件很好的解决了这个问题,可以应用于Mac.Windows两个电脑客户端以及Chem3D for iP ...

  3. C++关键字之const（整理！）

     C++ Code  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...

  4. 自定义控件_VIewPager显示多个Item

    一直以来想搞明白这个不完全的VIewPager是怎么做到的,有幸看到这片篇文章 有二种实现方法 1.设置的属性 1.clipChildren属性 2.setPageMargin 3.更新Item外界面 ...

  5. vue2.0中，由于页面完成之后dom还未加载完成如何进行操作

    再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...

  6. 时序数据库技术体系 – InfluxDB TSM存储引擎之TSMFile

    本文转自 http://hbasefly.com/2018/01/13/timeseries-database-4/ 为了更加系统的对时序数据库技术进行全方位解读,笔者打算再写一个系列专题(嘿嘿,好像 ...

  7. webpack——html-webpack-plugin

    一开始考虑到浏览器的缓存问题,所以给打包的文件都带了.[hash],但是,这之后,index.html文件中的引入并没有哈希值,所以,就用到了下面的信插件: html-webpack-plugin可以 ...

  8. LeetCode-Add and Search Word

    Design a data structure that supports the following two operations: void addWord(word) bool search(w ...

  9. json序列化懒加载问题

    如果框架使用了json序列化对象,当配置了hibernate懒加载时,可能会抛出异常,或者出现N+1的问题,或者出现无限循环的问题.网上很多解决方案, 基本是这些:@JsonIgnore忽略可能出问题 ...

  10. HDU 5877 2016大连网络赛 Weak Pair(树状数组，线段树，动态开点，启发式合并，可持久化线段树)

    Weak Pair Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Tota ...