1. javaScript处理DOM事件
1) javaScript处理DOM事件
<script type="text/javascript">
function clickOne(){
alert("点我干嘛？");
}
</script>
</head>
<body>
<input type="button" value="点我一下" onclick="clickOne()"/>
</body>
2) javaScript操作DOM节点
2.1 JavaScript修改DOM节点
2.2 JavaScript添加DOM节点
2.3 JavaScript删除DOM节点
<script type="text/javascript">
function modifyDOM(){
document.getElementById("txt").innerHTML="用户名：";
document.getElementById("userName").value="Jack";
}
function addDOM(){
var para=document.createElement("p");
var node=document.createTextNode("...前...");
var para2=document.createElement("p");
var node2=document.createTextNode("...后...");
para.appendChild(node);
para2.appendChild(node2);
var parent=document.getElementById("parent");
var son1=document.getElementById("son1");
parent.insertBefore(para, son1);
parent.appendChild(para2);
}
function removeDOM(){
var parent=document.getElementById("parent");
var son1=document.getElementById("son1");
parent.removeChild(son1);
}
</script>
</head>
<body>
<div id="parent">
<div id="son1">
<font id="txt">:</font><input type="text" id="userName" name="userName"/>
</div>
</div>
<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>
<input type="button" value="添加DOM节点" onclick="addDOM()"/>
<input type="button" value="删除DOM节点" onclick="removeDOM()"/>
</body>
3) javaScript修改DOM节点CSS样式
<script type="text/javascript">
function modifyDOMCSS(){
document.getElementById("gril").style.color="red";
}
</script>
</head>
<body>
<p id="gril">女程序猿</p>
<input type="button" value="修改DOM节点样式" onclick="modifyDOMCSS()"/>
</body>
分享到：
相关推荐
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题.docx
3.1 DOM不是JavaScript，它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 创建示例文档 3.3.1 创建DOM...
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。
DOM元素都有一些标准事件，一般使用时只要使用onclick=function的方式就可以了，但是当需要为DOM元素添加多个事件，删除事件，或在用Javascript封装控件的时候，为封装的控件添加自定义事件的时候，onclick=function...
主要介绍了JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题做个笔录，以防出现类似错误,需要的朋友可以参考下
JavaScript中BOM和DOM详解 目录 BOM（浏览器对象...DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法，封装工具 BOM（浏览器对象模型） 1. window 获取浏览器c窗口尺寸 2
1.访问相关的节点 2.检测节点类型(nodeType) 3.处理特性 4.访问指定节点 5.创建和操作节点
一、事件处理程序方式 1.在对应的Html标签上增加一个要处理的事件属性 如：禁止在页面中使用单击鼠标右键弹出快捷菜单 <head> <script type="text/javascript"> function hideContextmenu(){ return false...
JavaScript_DOM编程 DOM 的常用方法属性 经典实例 浏览器兼容处理
DOM2事件模型规则描述了创建、捕获、控制与取消事件的标准方法，还描述了事件传播行为，也就是说，一个事件如何到达其目标，以及达到后将要发生的动作。在6中，由于没有提供对 DOM2事件模型的支持,因此,本章中涉及...
博文链接：https://kuangbaoxu.iteye.com/blog/212792
3.1 DOM不是JavaScript，它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 创建示例文档 3.3.1 创建DOM...
3.1 DOM不是JavaScript，它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 创建示例文档 3.3.1 创建DOM...
dom.js - 一个专门处理 DOM 相关操作的 JavaScript 工具方法库。原生 JavaScript 纯手动打造，无任何依赖；支持 UMD 和 ES6 模块规范，适应各种运行环境；支持调用 DOM 整体模块和独立调用方法；提供 100+ 实用的 ...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
目录（一）定义（二）HTML事件处理函数① 特点② 缺点（三）DOM0级事件处理函数① 使用② 删除③ 缺点（四）DOM2级事件处理函数① 使用② 删除③ 注意 （一）定义 事件就是用户或者浏览器自身执行的某种行为，例如...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
本文详细的介绍了dom2中的高级事件处理，本文中出现的事件处理技术都是DOM0级的一部分,所有支持JavaScript的浏览器都支持DOM0的API。
猪游戏DOM操作 用javascript处理DOM的游戏使用Javascript和Css开发的基于Documnet对象模型处理的游戏。 所使用的算法可以在玩家之间切换，并可以在游戏法则的范围内给赢家。