获取事件源

    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. Mac终端使用mysql

    1.安装完mysql后给mysql命别名 alias mysql=/usr/local/mysql/bin/mysql aliasmysqladmin=/usr/local/mysql/bin/mys ...

  2. VC++ Splash Window封装类CSplash

    Splash.h 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 ...

  3. js实现jquery的offset()

    用过jQuery的offset()的同学都知道 offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop ...

  4. A*寻路算法（曼哈顿距离）

    前一些天,在群有人问到A*算法的问题. 之前我已经有实现过,并将之放到github上(https://github.com/XJM2013/A_Star).有兴趣的能够下载下来看看. 这里上传了一个相 ...

  5. 利用hugo生成静态站点

    动机 使用Markdown撰写博客,并以静态页面形式发布. 选择hugo 现在jekyll似乎更加流行,但是jekyll是基于Ruby的,在windows下安装很繁琐. 而hugo是用go写的,win ...

  6. poj 1386

    Play on Words Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11312   Accepted: 3862 De ...

  7. List remove及ConcurrentModificationException异常

    参考:http://blog.csdn.net/androidboy365/article/details/50540202/ 解决方案 // 1 使用Iterator提供的remove方法,用于删除 ...

  8. Mybatis 3.1中 Mapper XML 文件 的学习详解（转载）

    MyBatis 真正的力量是在映射语句中.这里是奇迹发生的地方.对于所有的力量,SQL 映射的 XML 文件是相当的简单.当然如果你将它们和对等功能的 JDBC 代码来比较,你会发现映射文件节省了大约 ...

  9. Bootstrap中关于input里file的样式更改

    给input里file类型加button样式 1.在Bootstrap中input里的file类型样式很不美观,一个按钮加一段文字,还会随浏览器的不同呈现不同的样式,所以开发的时候可以将file的样式 ...

  10. Struts2中的拦截器详解

    exception:异常拦截器,拦截异常aliasservletConfig18nprepare:预备拦截器,这个拦截器就是为了ModelDriven准备对象的,若Action类实现了preparab ...