javascript document对象第21节

<html>
<head><title>DOM对象</title><style type="text/css">table {border:1px solid green;border-collapse:collapse;width:300px;}td {padding:5px;border:1px solid green;font-size:16px;text-align:center;}table#tab {border:1px solid green;border-collapse:collapse;width:128px;}#tab td {border:1px solid green;padding:1px;}#tab td img {border:0; }</style><script type="text/javascript">function showMsg(id) {var val = document.getElementById(id);//节点if(val.nodeName == "SPAN") {alert(val.innerHTML);// 文本使用innerHTMLval.innerHTML = "oracle";//可以取值 赋值} else {alert(val.value);//文本框使用value属性取值val.value="李四";}}function checkAll(sta) {// alert(sta);var arr = document.getElementsByName("loves");//数组//alert(arr.length);//设置状态for(var i = 0; i < arr.length; i++ ) {arr[i].checked = sta;}}</script>    </head><body><div>DOM对象</div>1.document对象  getElementById()  getElementsByName()<br/><script type="text/javascript">/*document.open();//打开流document.close();*/document.write("document.body : ", document.body.nodeName , "<br/>");document.write("document.cookie : ", document.cookie , "<br/>");document.write("document.domain : ", document.domain , "<br/>");document.write("document.lastModified : ", document.lastModified , "<br/>");document.write("document.referrer : ", document.referrer , "<br/>");document.write("document.title : ", document.title , "<br/>");document.write("document.URL : ", document.URL , "<br/>");/*document.writeln("document.URL : " );document.write("document.URL : " );*/</script><table><tr><td><span id="show">javascript</span></td></tr><tr><td><input type="text" name="username" id="username"/></td></tr><tr><td><input type="button" value="span" οnclick="showMsg('show')"/><input type="button" value="文本框" οnclick="showMsg('username')"/></td></tr><tr><td><input type="checkbox" name="control"  οnclick="checkAll(this.checked)"/>全选/全不选</td></tr><tr><td><input type="checkbox" name="loves" value="足球"/>足球<input type="checkbox" name="loves" value="上网"/>上网<input type="checkbox" name="loves" value="旅游"/>旅游<input type="checkbox" name="loves" value="阅读"/>阅读</td></tr></table><br/>2.document对象  getElementsByTagName()<br/><script type="text/javascript">function randomImg() {var tab = document.getElementById("tab");//获取表格//通过标记名获取imgvar imgs = tab.getElementsByTagName("img");//alert(imgs.length);for(var i = 0; i < imgs.length; i++ ) {imgs[i].src = "ICONS/0" + ( Math.round( Math.random() * 84) + 11) + ".BMP"}}</script><table id="tab"><tr><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td></tr><tr><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td></tr><tr><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td></tr><tr><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td><td><img src="ICONS/011.BMP"/></td></tr></td></tr></table><br/><input type="button" value="打散" οnclick="randomImg()"/><br/>3.集合<br/><a href="http://www.baidu.com">百度</a><br/><a href="http://www.sina.com">新浪</a><br/><a href="http://www.taobao.com">淘宝</a><br/><form><input type="button" value="提交" /></form><form action="DOM对象操作.htm"><input type="button" value="提交" /></form><img src="p1.jpg"/><br/><img src="p2.jpg"/><br/><script type="text/javascript">document.write("document.links[1] .href : ", document.links[1] .href, "<br/>");document.write("document.forms[1] .action : ", document.forms[1] .action, "<br/>");document.write("document.images[17] .src : ", document.images[17] .src, "<br/>");function replaceCon() {document.links[1] .href = "http://www.163.com";document.forms[1] .action = "内置对象.htm";document.images[17] .src = "开发语言排行.jpg";alert(document.forms[1] .action);}</script><input type="button" value="替换" οnclick="replaceCon()" /></body>
</html>

rs:

转载于:https://www.cnblogs.com/feilongblog/p/4744907.html

javascript document对象第21节相关推荐

JavaScript Document对象DOM
Document对象 DOM 描述每个载入浏览器的HTML文档都会成为Document对象 Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问 Document 对象是 Win ...
JavaScript Document 对象
Document 对象的理解: 第一点:Document 它管理了所有的 HTML 文档内容. 第二点:document 它是一种树结构的文档.有层级关系. 第三点:它让我们把所有的标签都都对象 ...
Javascript document对象常用的方法和属性
对象属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor ...
javascript:document对象的常用属性和方法
属性意义 anchors[] anchors对象数组,每一个都代表文档中出现的一个锚地 applets[] applet对象数组,代表文档中 ...
《JavaScript启示录》——1.21 JavaScript对象和Object()对象
本节书摘来自异步社区<JavaScript启示录>一书中的第1章,第1.21节,作者:[美]Cody Lindley著,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
【JavaScript】document对象属性
document对象中,并没有特别的事件,它所支持的都是通用的. 在document上讲解这些属性不具有典型性,但只要掌握了一个对象在某个事件上的处理方式,也就自然的掌握了在其它对象上处理这个事件 ...
Javascript中的Document对象详解
Document对象详解 document 文挡对象 - JavaScript脚本语言描述 -------------------------------------------- ...
【JavaScript】Document对象学习
Document 对象当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document 对象是 HTML 文档的根节点. Document 对象使我们可以从脚本中对 HTML ...
javascript学习笔记之document对象、表单及表单元素、脚本化cookie
一.document对象每个window对象都有document属性.该属性引用表示在窗口中显示的HTML文档的document对象. 1.关键方法 close()关闭open方法打开的文档 ope ...

javascript document对象第21节

javascript document对象第21节相关推荐

最新文章

热门文章

javascript document对象 第21节

javascript document对象 第21节相关推荐

最新文章

热门文章

javascript document对象第21节

javascript document对象第21节相关推荐