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
分享到：
相关推荐
Leaflet1.0.3地图中文API,Leaflet是一个开源的JavaScript库，对移动端友好且有很好的交互性。 大小仅仅只有 33 KB， 同时具有大多数地图所需要的特点。 Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性。 它...
swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3...
hadoop-1.0.3 中文,资料都是来自apache，资料还是很齐全的，自己编译的，可以搜索，有些显示还是0.18版的，可能是文档没有更新过来。分数有点多，回复就会还你的。
swiper.animate.js是swiper提供的swiper结合animate的工具,然而他在vue中使用的话需要做一些修改.只是做了部分修改能使用了就可以了没有做什么大神的工厂模式各种设计,也没那能力.哈哈哈哈,反正能用,我是能用.
FS-i6CN1.0.3中文固件.7z
Weinview Easy Builder8000 V1.0.3简体中文说明书rar,Weinview Easy Builder8000 V1.0.3简体中文说明书
leaflet1.0.3
10、在 v1.0.3 中简化了所有参数的名称，让使用变得更加简单（用更少的代码，就能实现更复杂的效果）。 11、本次发布的动画控制器文件为min版，大大减少了文件的体积（下载解压后，文件位置在：js/swiper.animate....
KEmulator v1.0.3 手机模拟器 最新 中文 汉化
10、在 v1.0.3 中简化了所有参数的名称，让使用变得更加简单（用更少的代码，就能实现更复杂的效果）。 11、本次发布的动画控制器文件为min版，大大减少了文件的体积（下载解压后，文件位置在：js/swiper.animate....
赠送jar包：juniversalchardet-1.0.3.jar； 赠送原API文档：juniversalchardet-1.0.3-javadoc.jar； 赠送源代码：juniversalchardet-...人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
golang 1.0.3 for windwos
PC中最强的J2ME虚拟机 更新历史 v1.0.3 [2009.11.06] Partial BlackBerry support support MIDI,MP3 sound on samsung sound manager fixed JSR75 file connection bug v1.0.2 [2009.09.02] sensor api(jsr 256) ...
mpc-1.0.3.zipmpc-1.0.3.zipmpc-1.0.3.zipmpc-1.0.3.zip
setup1.0.3.exe
10、在 v1.0.3 中简化了所有参数的名称，让使用变得更加简单（用更少的代码，就能实现更复杂的效果）。 11、本次发布的动画控制器文件为min版，大大减少了文件的体积（下载解压后，文件位置在：js/swiper.animate....
libuuid-1.0.3.tar.gz
合同文档管理系统1.0.3版.rar
masscan-1.0.3.zip fast tcp scanner
和hbase1.0.3_part1合并使用