smith/js_dom.html

## js_dom.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta http-equiv="imagetoolbar" content="false">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Commenting out the following line will allow the
       mobile browser to resize the page to fit in the viewport. -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="">

  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <style>

    span {
      display: block;
      border-bottom: 1px solid #000;
    }

  </style>

</head>

<body>

  <div>

    <section id="hello">
      <h1>Hi There!</h1>
    </section>

    <section>

      <div>
        <p>This is a test paragraph</p>
      </div>

      <span>Test #1</span>
      <span>Test #2</span>
      <span>Test #3</span>
      <span>Test #4</span>

    </section>

  </div>

  <!-- Uncomment the following line to include jQuery from Google -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

  <script>

    $("*").bind("click", function (event) {
      var t = $(this),
          name = t[0].nodeName, // current node name
          dir = [name], // list of nodes
          p, // previous or parent element
          str; // string representation

      while (name !== "BODY") {
        p = t.prev();
        if (p.length > 0) {
          str = p[0].nodeName + " + ";
        } else {
          p = t.parent();
          str = p[0].nodeName + " > ";
        }
        dir.unshift(str);
        t = p;
      }

      console.log(dir.join(" "));

      return false;

    });

  </script>


</body>
</html>
	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
	<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
	<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

	<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
	<meta http-equiv="imagetoolbar" content="false">

	<title></title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Commenting out the following line will allow the
	mobile browser to resize the page to fit in the viewport. -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="">

	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<style>

	span {
	display: block;
	border-bottom: 1px solid #000;
	}

	</style>

	</head>

	<body>

	<div>

	<section id="hello">
	<h1>Hi There!</h1>
	</section>

	<section>

	<div>
	<p>This is a test paragraph</p>
	</div>

	<span>Test #1</span>
	<span>Test #2</span>
	<span>Test #3</span>
	<span>Test #4</span>

	</section>

	</div>

	<!-- Uncomment the following line to include jQuery from Google -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

	<script>

	$("*").bind("click", function (event) {
	var t = $(this),
	name = t[0].nodeName, // current node name
	dir = [name], // list of nodes
	p, // previous or parent element
	str; // string representation

	while (name !== "BODY") {
	p = t.prev();
	if (p.length > 0) {
	str = p[0].nodeName + " + ";
	} else {
	p = t.parent();
	str = p[0].nodeName + " > ";
	}
	dir.unshift(str);
	t = p;
	}

	console.log(dir.join(" "));

	return false;

	});

	</script>



	</body>
	</html>