window对象的属性1
window.location对象：
window.location.href=‘’;//重新导航到新页面,可以取值，也可以赋值。
window.location.reload();//刷新当前页
window.event是IE下非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArgs)。//兼容IE、Chrome，不兼容FF（用event参数）。

window对象的属性2
window.event的属性（接上页）：
clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。当页面中有<!DOCTYPE（文档定义）时，对offsetX和offsetY单击时的解析不同(使用onmousedown的时候与onclick测试结果不同。)。
(window.event.returnValue)returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。(onsubmit="window.event.returnValue=false;")

window对象的属性3
window.event的属性（接上页）：
srcElement：获得事件源对象。几个按钮共享一个事件响应函数用。****_click(object sender,EventArgs e)//IE、Chrome支持。见备注1。//FF下用e.target;
（*）screen对象，获取屏幕的信息：
alert("分辨率：" + screen.width + "*" + screen.height);
        if (screen.width < 1024 || screen.height < 768) {
            alert("分辨率太低！");
        }

window对象的属性4
clipboardData对象，对粘贴板的操作。//只支持IE,FF参考资料
setData("Text",val)，设置粘贴板中的值。
getData(“Text”)读取粘贴板的值，返回值为粘贴板中的内容；
clearData(“Text”)清空粘贴板；
当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;"
很多元素也有oncopy(复制)、onpaste（粘贴）事件：oncut
-------------------------------------------------------
 document.body.oncopy = function () {
                alert('不让复制');
                return false;
-------------------禁止复制----------------------------
 vartext= clipboardData.getData(‘text’)+‘本文出自小杨’;

document.getElementById('t').onpaste = function () {
                alert('禁止粘贴');
                return false;
            };
------------------------禁止粘贴------------------------

window对象的属性5---document
document属性：
document属性是window对象中最复杂的属性。
因为使用window对象成员的时候可以省略window.，所以一般直接写document。
document的方法：
write();//向文档中写入内容。writeln()，和write差不多，只不过最后添加一个回车。在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起。writeln()是在源代码里面换行。与<br/>不一样。

document.write()经常在广告代码、整合资源代码中被使用。见备注。内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。

window对象的属性6---document
最基本的DOM遍历演示。
===================================备注1 ================================
//遍历直接子节点，如需获得所有节点，用递归。需要放在页面的最后测试（或者是在onload里面，否则页面还没有加载完毕。）
 var objHtml = document.documentElement;
        for (var i = 0; i < objHtml.childNodes.length; i++) {
            alert(objHtml.childNodes[i].nodeName);
        }
getElementById(), （非常常用），根据元素的Id获得对象，网页中id不能重复。
不建议直接通过id操作元素，而是通过getElementById。

getElementsByName()，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。

getElementsByTagName()， 获得指定标签名称的元素数组，比如getElementsByTagName(“input”)可以获得所有的<input>标签。*表示所有标签
此处切忌不要使用forin循环(forin循环循环的是键值对，不是对象本身。)。

//本来可以直接使用元素的Id来访问，但是如果元素嵌套在表单中后，就不能直接使用元素Id了
            //还需要window.form.元素id,所以我们一般用document.getElementById(元素id).该方法无论在哪里
            //都会搜索网页中的全部元素，找对应id的元素。
            document.getElementById('btn2').value = 'button';

//如果在网页中有id重复的元素，那么getElementById()获得的是
            //第一id为指定id的元素，而不是数组

事件中的this
This表示当前触发的对象,该事件注册给哪个对象this就表示哪个对象
Window.event.srcElement表示最初引发事件的对象

事件冒泡
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。
取消事件冒泡： window.event.cancelBubble = true;//IE下的写法。
Span设置display:block；以后再设置height,width才会有效。

事件中的this
This表示当前触发的对象,该事件注册给哪个对象this就表示哪个对象
Window.event.srcElement表示最初引发事件的对象

动态创建DOM
document.write只能在页面加载过程中才能动态创建。
可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。
function showIt() {
            var divMain = document.getElementById("divMain");
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "我是动态的！";
            divMain.appendChild(btn);
        }
<div id="divMain"></div>
<input type="button" value="ok" onclick="showit()" />

=====================常用方法与属性===========================
方法：
createElement(‘element’);创建一个节点
appendChild(node); 追加一个节点
removeChild(node);移除一个节点
replaceChild(new,old);替换一个节点
insertBefore(new,参照);把节点加到前面（插到某个节点前面）
属性：
firstChild
lastChild

innerText和innerHTML
几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。//FF不支持innerText,在FF下用textContent属性。也可以用innerHTML设置普通文本。//编写兼容的innerText
示例：
function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<a href='http://www.baidu.com'>百度</a>";}

（*）通过能力检测，写一个可以兼容FF与IE的使用innerText与textContent的代码。
-----------------------兼容的写法-------------------------
 var dvObj = document.getElementById('dv');
            if (typeof (dv.innerText) == 'string') {
                dvObj.innerText = '<strong>哈哈</strong>';
            } else {
                dvObj.textContent = '<strong>哈哈</strong>';
            }
innertHTML所有浏览器都支持
//innerText只能设置纯文本，即便写了html代码，也会对html代码进行编码，
//innerHTML可以设置html代码和纯文本。

JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）的更多相关文章

  1. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  2. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  3. jQuery编程基础精华03（RadioButton操作，事件，鼠标）

    RadioButton操作 取得RadioButton的选中值,被选中的radio只有一个值,所以直接用val()  $('#btn1').click(function () {           ...

  4. JavaScript DOM编程基础精华03（动态设置,层的操作,性能问题）

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  5. JavaScript中的window对象的属性和方法；JavaScript中如何选取文档元素

    一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...

  6. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  7. 全局变量都是window对象的属性

    var x = "haha"; var test  = function(){ alert(this.x); } 上述,则会弹出 haha的值. 因为在JavaScript的变量作 ...

  8. window对象的属性及事件。

    不同的运行环境有不同的“顶层对象”,而在浏览器的环境中,顶层对象就是window对象.window就是指当前的浏览器窗口. 例:var a = 1: window.a; //1 1.window对象的 ...

  9. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

随机推荐

  1. js文本框验证

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  2. 【转】Microsoft® SQL Server® 2012 Performance Dashboard Reports

    http://www.cnblogs.com/shanyou/archive/2013/02/12/2910232.html SQL Server Performance Dashboard Repo ...

  3. Oracle查询出最最近一次的一条记录

    需求:从一个表中查询数据,得到的数据为最新的一条记录. -------------建立测试表 --drop table TB ),dtDate date) -------------插入测试数据 ,' ...

  4. oracle中的记录类型

    单词RECORD有“记录”的意思,因此RECORD也称为“记录类型”,使用该类型的变量可以存储由多个列值组成的一行数据. 在声明记录类型变量之前,首先需要定义记录类型,然后才可以声明记录类型的变量. ...

  5. Struts 2简单配置分析

    要配置Struts 2,首先先要有Struts 2的Jar包,可以去Struts的官网下载(http://struts.apache.org/),这里有3个GA版本可以选择下载,我选择的是最新的2.2 ...

  6. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  7. JXL读取写入excel表格数据

    问题描述: 使用java的jxl包创建.写入excel表格数据 问题解决: (1)说明 (2)写入execel数据 注: 以上是写入数据需要调用的函数接口 注: 具体接口调用过程,如上所示 (3)读取 ...

  8. [转载]ASP.NET对路径"xxxxx"的访问被拒绝的解决方法小结

    异常详细信息: System.UnauthorizedAccessException: 对路径“D:/temp1/MyTest.txt”的访问被拒绝     在windows 2003下,在运行web ...

  9. Eclipse 中Alt+/快捷键失效的解决办法。

    1.Eclipse下进入Windows ->Preperences ->General ->keys2.把word completion的快捷键设置alt+/删掉! 3.把Conte ...

  10. 【技术贴】解决bug mantisbt APPLICATION ERROR #1502 没有找到类别

    解决bug mantisAPPLICATION ERROR #1502 没有找到类别 mantisbt出现1502问题解决:引起问题的原因:当提交的问题有分类,此时删除此分类,就会出现下面的情况.问题 ...