JavaScript基础--DOM对象加强篇（十四）
1、document 对象
定义：document对象代表的整个html文档，因此可以去访问到文档中的各个对象（元素）
document重要的函数
1.1 write
向文档输出文本或js代码
1.2 writeln
向文档输出文本或者js代码，与write不一样的地方是，writeln是换行输出。
比如： document.write("hello");document.writeln("ok");
hello
ok
但是对浏览器来看，输出效果没有区别。
1.3 getElementById()
1.3.1 规定：HTML文档中id号要唯一，如果不唯一，则只取第一个元素。
1.3.2 id不要用数字开头
<script language="javascript" type="text/javascript">
function test1(){
var myhref=document.getElementById("1a");
window.alert(myhref.innerText);
}
</script>
<body>
<a id="1a" href="http://www.sohu.com">连接到sohu</a></br>
<a id="1a" href="http://www.sina.com">连接到sina</a></br>
<a id="1a" href="http://www.163.com">连接到163</a></br>
<input type="button" value="testing" onclick="test1()"/>
</body>
1.4 getElementsByName()
通过元素的名字来获取对象集合
<script language="javascript" type="text/javascript">
function test2(){
//id不能唯一，但是name可以重复
var hobbies=document.getElementsByName("hobby");
//window.alert(hobbies.length);
for(var i=0;i<hobbies.length;i++){
//如何判断是否选择
if(hobbies[i].checked){
window.alert("你的爱好是" + hobbies[i].value) }
}
}
</script>
<body>
请选择你的爱好
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="旅游"/>旅游
<input type="checkbox" name="hobby" value="音乐"/>音乐
<input type="button" value="testing" onclick="test2()"/>
</body>
1.5 getElementsByTagName()
通过标签的名字获取对象集合
<script language="javascript" type="text/javascript">
//通过标签名来获取对象（元素）
function test3(){
var myObjs = document.getElementsByTagName("input");
for(var i=0;i<myObjs.length;i++){
window.alert(myObjs[i].value);
}
}
</script>
<body>
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="旅游"/>旅游
<input type="checkbox" name="hobby" value="音乐"/>音乐
<input type="button" value="testing" onclick="test3()"/>
</body>
1.6 动态创建HTML元素
举例：
<script language="javascript" type="text/javascript">
function test1(){
var myElement=document.createElement("a");//??写希望创建的html元素标签名
myElement.type="button";
myElement.value="我说button";
myElement.id="id1";
//给新的元素添加必要的属性信息
//myElement.href="http://www.sina.com.cn";
//myElement.inner="链接到新浪";
//myElement.style.left ="200px";
//myElement.style.top ="300px";
//myElement.style.position="absolute";
//添加到document.body
//document.body.appendChild(myElement);
//将元素添加到div
document.getElementById("div1").appendChild(myElement);
} function test2(){
//删除一个元素(删除一个元素是有前提：必须获取父元素)
//这是第一种删除方法（比较不灵活）
//document.getElementById("div1").removeChild(document.getElementById("id1"));
window.alert(document.getElementById("id1").parentNode.id);
//第二种比较灵活(推荐)
document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"));
}
</script>
<body>
<input type="button" onclick="test1()" value="动态的创建一个超链接"/>
<input type="button" onclick="test2()" value="删除一个元素"/>
<div id="div1" style="width:200px;height:400px;border:1px solid red;">div1</div>
</body>
2、在Dom编程中，一个Html文档会被当做dom树来对待，dom会把所有的html元素映射成Node节点，于是你就可以使用Node节点（对象）的属性和方法
<script language="javascript" type="text/javascript">
function test1(){
var wuguiDiv=$("wugui");
window.alert(wuguiDiv.nodeName+" "+wuguiDiv.nodeType +" "+wuguiDiv.nodeValue);
window.alert(wuguiDiv.childNodes.length+" "+wuguiDiv.nextSibling.nodeValue+" "+wuguiDiv.parentNode.parentNode);
}
function $(id){
return document.getElementById(id);
}
</script>
<body>
<input type="button" value="testing" onclick="test1()"/>
<!--把乌龟放在一个div-->
<div id="wugui" style="position:absolute;left:100px;top:120px;">
<img src="1.bmp" border="1" alt=""/>
</div>
<!--公鸡图片div-->
</body>
3、dom的属性
案例：
<script language="javascript" type="text/javascript">
document.fgColor="white";
document.bgColor="black";
</script>
<body>
hello
</body>
4、body对象说明
4.1 body 属性：
4.1.1 innerText 某个元素间的文本
4.1.2 innerHtml 某个元素间的html代码
举例：
<script language="javascript" type="text/javascript">
function test(){
//innerHtml浏览器会作为html来解析
document.getElementById("myspan").innerHtml="<a href='http://www.sohu.com'>到sohu</a>";
//innerText浏览器会作为文本来解析
document.getElementById("myspan").innerText="<a href='http://www.sohu.com'>到sohu</a>";
}
</script>
<body>
<span id="myspan"></span>
<input type="button" onclick="test()" value="测试"/>
</body>
4.2 body事件
4.2.1 window_onselectstart()
4.2.2 window_onscroll()
<script language="javascript" type="text/javascript">
function window_onscroll(){
myHref.style.top=document.body.scrollTop + 50;
myHref.style.left=document.body.scrollLeft;
} function document_onselectstart(){
return false; //返回false,这样就可以禁止用户选网页中的文本，
//当用户选择文本时，会触发 onselectstart 事件，当返回false时，就不会选中
//你也可以在body加入onselectstart="return false;"同样达到这个效果
}
</script>
<script language = javascript for=document event=onselectstart>
<!--
//这样的写法等同于在body上 onselectstart="return false"
window.alert('abc');
return document_onselectstart()
//-->
</script>
<body onscroll="return window_onscroll()">
<TEXTAREA id="Textareal" name="Textareal" rows="500" cols="500">
这个文本足够大！
这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！这个文本足够大！
</TEXTAREA>
<a id=myHref href="http://www.sohu.com" style="LEFT:0px;POSITION:absolute;Top:50px;word-break:keep-all"><img src="ad.bmp"/></a>
</body>
JavaScript基础--DOM对象加强篇（十四）的更多相关文章
- JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）
DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- JavaScript之DOM对象的获取
之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...
- javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- Javaweb学习笔记——（三）——————JavaScript基础&DOM基础
day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...
- JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
- JavaScript操作DOM对象
js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
随机推荐
- Hudson(Jenkins)持续集成插件开发环境搭建
Hudson持续集成插件开发环境搭建 第一步安装java jdk,至于版本的话推荐1.6以上吧.安装好jdk设置环境变量,确保你在cmd中输入java -version有提示你jdk的版本信息等,也就 ...
- 一个平台BUG,好吧，找到了一个新的办法，同样的效果
问题的来源,我是看到别人这么做,我只是看到了这个程序运行的视频,具体是当你选择通信方式时1 COM , 2 网口:要求在combobox中选择,selectindex为0时显示COM的选项,为1 ...
- android常见问题
1.广播接收器中启动Activity,需要在intent中添加FLAG_ACTIVITY_NEW_TASK /** * Demo描述: * 在BroadcastReceiver中启动Activity的 ...
- Animation小问题整理
1.在动画播放中改变层级内容的名字,不会造成动画内容映射的改变. 2.Animator动画剪辑层级没问题,但是不播放 检查是否Mask损坏,FBX文件的Animations选项下面有个Mask.Uni ...
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- WPF+WEB+WinForm->>表现层共用类
首先在解决方案里新建一个类库,然后在解决方案里新建三个项目,WPF,WEB,WinForm,但是这三个项目都需要一个计算类进行计算,那么就在新建的类库Calculator里面放一个Calculat.c ...
- python的反射机制
转载自:http://www.cnblogs.com/feixuelove1009/p/5576206.html 对编程语言比较熟悉的朋友,应该知道"反射"这个机制.Python作 ...
- XAF应用开发教程(八) 汉化与多国语言支持
使用了XAF开发时,汉化是一个比较常的问题. 要实现汉化很简单: 1.在这里下载汉化资源文件.这里演示的版本是15.1.X的 2.文件下载后将:文件解压到目录 <你的项目>\BIN\ ...
- 视频播放器之————JW Player参数详解
JW Player参数详解 1,安装 下载后,你可以得到一个例子,当用文本或HTML编辑器打开的时候,你可以发现swf是用一段短小的 javascript嵌入到页面上的.这个Javascript是Ge ...
- Android复习指南
基础无外乎几部分:语言(C/C++或java),操作系统,TCP/IP,数据结构与算法,再加上你所熟悉的领域.这里面其实有很多东西,各大面试宝典都有列举. 在这只列举了Android客户端所需要的和我 ...