Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Accessing nodes in a DocumentFragment or selected text?

containsNode method failing, trying to find div element in DocumentFragment


JAB Creations

7:52 am on Jun 24, 2011 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I'm having a heck of a time trying to determine if a any divisible element is inside of a selected range (in part or whole). My goal is to create a blockquote element with the selected text except if the selected text contains a divisible element (in part or whole) as that implies the user is selecting text that is not intended to be quoted (e.g. forum user name, post count, join date). The only trouble I'm having is figuring out how to determine (reliably) if a divisible element is inside of the selected text.

The selected XHTML is copied via the cloneNode method however I want to prevent users from selecting invalid parts of the page (e.g. outside of a forum post's divisible element or including that divisible element itself). However being in part or whole the containsNode method is failing miserably (var z = 0; window.getSelection().containsNode(document.getElementsByTagName('div)[z],false/true). I was able to use the childNodes property on the variable assigned to contain the cloned node however it's childNodes.length is always reported as 0 so that was shot down rather quickly.

So I'm wondering if there is a method that I can use to iterate over each element/node in a DocumentFragment? I've also tried figuring out how to iterate over the XHTML in the selected text (window.getSelection()) without success. The only way I can think to make this work is cheaping out by appending the XHTML to a temporary element and then scan it for any divisible elements though there has to be a valid way to do this with the DOM.

Below is an example of one manner I've attempted to approach the issue. Thoughts please?

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title>Selected text contains div?</title>
<script type="text/javascript">

function test()
var a = document.getElementById('body').getElementsByTagName('div');
var l = false;
for (var i=0;i<=a.length;i++)
// Set line below to true or false when selecting only text (e.g "om tex") not successful either way.
if (window.getSelection().containsNode(document.getElementsByTagName('div')[i],false)) {l = true; break;}

<style type="text/css">
body {background-color: #000; color: #f0f;}
div {margin: 0px 20px 20px 20px; padding-top: 20px; outline: #ff0 solid 1px;}
p {color: #fff;}


<div id="body">

<p>some text 1</p>
<p>some text 2</p>
<p>some text 3</p>

<p>some text 4</p>
<p>some text 5</p>
<p>some text 6</p>

<input onclick="test();" type="button" value="Contains divisible element?" />




4:53 am on Jun 27, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


Range properties in particular, seems relevent. Cross browser support looks messy.

Featured Threads

Hot Threads This Week

Hot Threads This Month