1.0 通过dom对象设置内容
2.0 通过dom对象改变样式
3.0 通过dom对象添加事件
4.0 通过dom对象添加元素
5.0 通过dom对象删除元素/节点
<!DOCTYPE html>
<html>
<head>
<title>DOM对象</title>
<script type="text/javascript">
//通过document.getElementById获取元素对象
function introMethod(){
var x=document.getElementById("intro");
document.getElementById("showText").innerHTML='P标签中的内容是：' + x.innerHTML;
}
//改变样式
function updateStyle(){
var x=document.getElementById("intro");
x.style.color="#adcdef";
x.style.fontFamily="Arial";
x.style.fontSize="larger";
}
//
function showText2(){
var x=document.getElementById('intro');
var x2=document.getElementById('show2');
if(x.style.visibility=='visible'){
x.style.visibility='hidden';
x2.innerHTML="显示文本";
}else{
x.style.visibility='visible';
x2.innerHTML="隐藏文本";
}
}
//改变文本
function updateMe(thisTag){
thisTag.innerHTML="你还真点击我呀";
}
//给标签添加事件
function addEvent(){
document.getElementById("intro3").onclick=function(){showDate();};
}
function showDate(){
document.getElementById("intro3").innerHTML=new Date();
}
//鼠标事件
//鼠标滑过
function mOver(thisTag){
thisTag.innerHTML="谢谢";
}
//鼠标离开
function mOut(thisTag){
thisTag.innerHTML="把鼠标移到上面";
}
//鼠标按下
function mDown(thisTag){
thisTag.innerHTML="鼠标按下";
}
//鼠标松开
function mUp(thisTag){
thisTag.innerHTML="鼠标松开";
}
//鼠标按下事件优先于鼠标松开事件
function mclick(thisTag){
thisTag.innerHTML="鼠标点击";
}
//添加元素
function addElement(thisTag){
//创建元素
var child=document.createElement("p");
//创建文本节点
var node=document.createTextNode("这是新增的内容哦");
//向元素追加文本节点
child.appendChild(node);
var x=document.getElementById("span1");
x.appendChild(child);
}
//删除已有的节点
function delElement(thisTag){
var ps=thisTag.getElementsByTagName("p");
for(var i=0;i<ps.length;i++){
ps[i].parentNode.removeChild(ps[i]);
}
}
</script>
</head>
<body onload="addEvent()">
<div id="showText"></div><br />
<p id="intro">Hello World</p>
<p id="intro2" onclick="updateMe(this)">点击我呀</p>
<p id="intro3" >给我分配事件吧</p>
<button onclick="introMethod()">GetElementById<button>
<button onclick="updateStyle()">改变样式<button>
<button id="show2" onclick="showText2()">显示文本<button><br />
<div onmouseover="mOver(this)" onmouseout="mOut(this)" onmousedown="mDown(this)" onmouseup="mUp(this)" onclick="mclick(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff">
把鼠标移到上面
</div><br />
<span id="span1" onclick="addElement(this)">巴拉拉拉链<span>
<span id="span2" onclick="delElement(this)">
<p id="p1">这是第一个节点</p>
<p id="p2">这是第二个节点</p>
<span>
</body>
</html>
@dianxinxinxiyuan.xiuyanxilu.pudongqu.shanghai
分享到：
相关推荐
开发者可以通过dojo.require()引入需要的模块，如dojo.dom、dojo.event等，这在当时的JavaScript环境中是一个创新的解决方案，提高了代码的组织性和可维护性。 3. **Dojo的核心组件** - **dojo.js**：Dojo的核心...
Jangaroo的开发者可能会遇到的一些关键概念包括：类和对象、包结构、继承、多态、事件处理、类型系统以及与JavaScript的交互（因为AS3和JS在某些方面有相似之处）。此外，理解如何使用Jangaroo编译器将源代码转换为...
标签中的"ezmorph-1.0.3.jar"再次强调了这个库在项目中的重要性，而"jquert开发工具"可能指的是用于编写和调试jQuery代码的IDE插件或者辅助工具，如jQuery插件库、在线编辑器或开发者工具等。 压缩包内的"struts2...
【WordPress炫酷HTML5自适应主题博客模板 v1.0.3】是一个专为WordPress设计的先进主题，它集成了现代网页技术，如HTML5和CSS3，旨在为用户提供一个流畅、美观且响应式的博客平台。这个主题不仅注重外观设计，同时也...
在实际开发过程中，AKjs_v1.0.3压缩包包含了框架的所有源码、CSS样式文件、JavaScript脚本、图片资源以及示例代码，开发者可以通过研究这些文件来更好地理解和使用AKjs。同时，框架通常会提供详细的文档和示例，帮助...
同时，由于依赖于浏览器的 DOM 操作和事件处理，所以可能会在某些较旧或非主流的浏览器上表现不佳。在实际项目中，应测试并确认其在目标浏览器上的兼容性。 `TableDnD-master` 压缩包可能包含以下内容： - `...
7. **JavaScript 开发工具**：由于聚合物基于JavaScript，因此开发者可能需要熟悉Babel（用于转换ES6+语法）、Webpack（模块打包工具）或Gulp/Grunt（任务自动化工具）等JavaScript生态系统中的工具。 8. **学习...
AppFramework是一款轻量级、高性能的JavaScript框架，主要用于构建跨平台的Web应用程序。这款框架以其模块化、可扩展性以及对多种设备和浏览器的良好支持而备受开发者青睐。AppFramework 2.1.0是该框架的一个版本，...
Cyer是一个轻量、小巧的js框架，精简易懂的API设计，支持链式调用...版本更新到v1.0.3，增加domReady事件，只要dom结构描绘完毕就可以解析相应的代码，而不用等页面元素全部加载完毕后再执行脚本。 标签：Cyer
在Leaflet中文版文档中，首先会介绍API所使用的Leaflet版本，例如文档中提到的是v1.0.3版本。如果用户使用的版本与文档版本不一致，则需要下载对应版本的API文档。同时，还提供了查看英文原版API的链接，以便于用户...
最后，"animate.zip" 文件可能是Animate.js，一个JavaScript动画库，它可以与Swiper结合使用，创建更复杂的动画序列。 总的来说，这个压缩包提供了Swiper的不同版本和相关的库，可以帮助开发者全面了解和使用Swiper...
"cascade-1.0.3.js" 和 "cascade-1.0.3.min.js" 文件很可能是这个功能的JavaScript库，其中".min.js"版本是经过压缩和优化的，适用于生产环境，以减少页面加载时间。这些文件可能包含了处理级联选择逻辑的核心函数，...
Mozilla Addon SDK 1.0.3 是一个用于开发Firefox浏览器扩展的工具包，它基于JavaScript和JQuery技术，使得开发者能够使用熟悉的编程语言创建功能丰富的浏览器插件。这个压缩包"addon-sdk-1.0b3.zip"包含了SDK的所有...
您将在此存储库中找到后端内容： : 主机：OVH 技术： React：17.0.1 react-redux：7.2.2 redux：4.0.5 redux-thunk：2.3.0 react-burger-menu：3.0.2 react-hexgrid：1.0.3 react-router-dom：5.2.0 react...
autopublish 1.0.3 将整个数据库发布给所有客户端电子邮件 1.0.6 发送电子邮件insecure 1.0.3 默认允许所有数据库写入Iron:router 1.0.7 专为 Meteor 设计的路由jquery 1.11.3_2 使用 CSS 选择器操作 DOM markdown ...
在Java编程中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于服务器与客户端之间的数据传输。为了在Java中使用JSON对象，我们需要引入相应的库支持，这些库通常封装了JSON的解析和序列化...
1. jQuery库：这是一个流行的JavaScript库，提供了丰富的DOM操作、事件处理、动画和Ajax功能。 2. JSP（JavaServer Pages）：这是一个服务器端的技术，用于动态生成HTML页面。 3. JSON（JavaScript Object Notation...
在深入了解Vue.js项目结构之前，我们需要先明确本项目的基础技术栈，主要包括：Vue 2.0、Vue CLI、Webpack、Vue Router 2.0 和 Vue Resource 1.0.3。这些技术构成了一个完整的前端开发框架，用于快速构建和部署复杂...
使用npm进行npm install leaflet.control.resizer （和require('leaflet.control.resizer') ），或仅下载L.Control.Resizer.js和L.Control.Resizer.css并添加脚本和链接标记在您的html中。 兼容性 经传单1.0.3和...
目录图书馆该应用程序上使用的库为： * "react": "^16.13.1",* "react-border-wrapper": "^1.0.3",* "react-dom": "^16.13.1",* "react-responsive-carousel": "^3.2.9",* "react-scripts": "3.4.3",* "react-...