AboutAndrew Hoffman Expertise I can field just about any question within this topic ranging from JavaScript to CSS, the two ingredients of DHTML. I`m very interested in the W3C and its validation rules for HTML, XHTML, and CSS, and enjoy answering questions of this type as well. I detest sleep and respond at all hours of the day or night.
Experience Experience in the area I've been working with DHTML and CSS for 7 years now and build/maintain websites of my own that implement DHTML navigation.
What I'm doing now My contract with Microsoft has ended and I am working for myself once again. Please contact me for any front-end work at antibland@gmail.com
Question Hi again Andrew.
I went past the last hurdle with your help and got stuck up again at the very next one :-(. This time I'm trying to modify the selector text for a CSS rule using JavaScript.
I'm following the details on page: http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript.
I'm successfully able to use the "cssRule.selectorText" in an alert message. However, when I try to modify it using JavaScript, it raises an error. So my questions this time are:
1) Is it possible to modify the selector text using JavaScript ?
2) If I need to find whether any browser might support such a feature, what part of the w3c site do I start from (so that I bother you less) ?
Thanks in advance again,
Parag P. Doke
Answer Parag,
I don't answer questions involving external frameworks or toolboxes, but can give you a few homegrown examples of retrieving text in an element. This is not say I'm not in favor of using these frameworks--I am--but it's not worth my time to learn a framework I will probably not use again.
Ok, now for some code. Keep in mind the following information, first. When you want to get the text inside of an element, you're really going for the value of the text node containing the actual text value you want. So, text is inside of it's own node--it's not just floating free outside of an element. This took me a while to understand, but grasping this will help you understand the DOM (Document Object Model) in greater detail.
Note below when I use .lastChild.nodeValue. The 'lastChild' refers to the textNode of an element. The 'nodeValue' property is the actual value of the text inside of this node.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>abbr example</title>
<script type="text/javascript">
window.onload = function() {
// get textNode value of first <li> inside of 'level_one' <ul>
alert(document.getElementById("level_one").getElementsByTagName("li")[0].lastChild.nodeValue);
// get textNode value of second <a> inside of <p>
alert(document.getElementsByTagName("p")[0].getElementsByTagName("a")[1].lastChild.nodeValue);
