当前位置:首页 > 开发 > Web前端 > DOM > 正文

DOM范围

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
dom
摘要: //创建范围     function getRange( ele ) {        var range = document.createRange(),           &nb

//创建范围

    function getRange( ele ) {
        var range = document.createRange(),
                eleIndex = -1,
                i, len;
        for ( i = 0, len = ele.parentNode.childNodes.length; i < len; i++ ) {
            if ( ele.parentNode.childNodes[i] == ele ) {
                eleIndex = i;
                break;
            }
        }

        //1设置选区
        range.selectNode( ele );
        range.selectNodeContents( ele );
        //2复杂选区设置
        range.setStart( ele.parentNode, eleIndex );
        range.setEnd( ele.parentNode, eleIndex + 1 );
        range.setStart( ele.firstChild, 2 );
        range.setEnd( ele.firstChild, ele.firstChild.length );
        var startEle, endEle;
        range.setStartAfter( startEle );
        range.setStartBefore( startEle );
        range.setEndAfter( endEle );
        range.setEndPoint( endEle );

        //3操作选区
        range.deleteContents();    //删除选区
        range.extractContents();     //删除选区 返回删除的片段
        range.cloneContents();  //返回选区副本
        range.cloneRange();  //克隆
        range.detach();  //从文档中分离
        range = null; //解除引用

        //4插入选区
        var span = document.createElement( "span" );
        span.appendChild( document.createTextNode( "inserted text" ) );
        range.insertNode( span );

        //环绕范围插入内容 可用于凸显效果
        var color = document.createElement( "span" );
        color.style.background = "yellow";
        range.surroundContents( color );

        //5折叠dom范围 适合文本框
        range.collapse( true );  //true折叠到起点 false折叠到终点
        alert( range.collapsed ); //返回是否折叠

        //6比较dom范围
        var rang1= document.createRange(), rang2= document.createRange();
        range.compareBoundaryPoints( rang1, rang2 );

    }

    getRange( document.querySelector( ".p" ) );

DOM范围

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1 DOM
一、DOM简介 D——document,没有文档,也就是没有网页,DOM就无从谈起。 当创建了一个网页并把它加
2 DOM
要访问<html/>元素可以使用document的特性 var oHtml = document.documentElement; 要取得<
3 DOM
学习要点: 1.DOM 介绍 2.查找元素 3.DOM 节点 4.节点操作 DOM (Document Object Model) 即文档对
4 dom
继承在dom中的重要性,以下为a标记继承关系图 <img alt="" src="/admin/blogs/data:image/png;ba
5 dom
继承在dom中的重要性,以下为a标记继承关系图 <img alt="" src="/admin/blogs/data:image/png;ba
6 DOM
  文件对象模型(Document Object Model,简称DOM),是W3C推荐的标准编程接口,它使一个程序或脚本
7 DOM
Node类型 所有节点类型由在Node类型中定义的12个数值常量来表示,任何节点类型必居其一: Node.ELEM
1、Maven因为执行一系列编译、测试和部署运行等操作,在不同的操作下使用的classpath不同,依赖范围
PS:今天上午,非常郁闷,有很多简单基本的问题搞得我有些迷茫,哎,代码几天不写就忘。目前又不当CO
Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - D
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号