zoukankan      html  css  js  c++  java
  • JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)

    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代码和纯文本。



  • 相关阅读:
    【转】C#中Serializable序列化实例详解
    【转】c# [Serializable]的作用
    【转】垂直分库和水平分库
    js数组歌
    好用的漂浮广告 jquery
    详解Vue 开发模式下跨域问题
    老项目用webpack中文乱码问题解决记录
    Vuex异步请求数据通过computed计算属性值
    js数组操作
    Vuex速学篇:(2)利用state保存新闻数据
  • 原文地址:https://www.cnblogs.com/CSharpLover/p/5193662.html
Copyright © 2011-2022 走看看