Getting attributes for current node

I'm trying to determine all of the nodes for the position the user has selected, all the way up to the parent <div id="comment">.

The problem I'm having is when there's a child DIV that's pasted in, the loop is assigning the parent's ID (and every other attribute I can think of) to all of the child DIVs.

Meaning, this:

<blockquote>
 <div id="comment" data-ce data-autoresize class="ib" contentEditable="true">
  <div class="test">
   <b><i>Testing</i></b> testing, 1 2 3<br>another test
  </div>
 </div>
</blockquote>

$('#comment').on('keydown mouseup', function(e) {
 var node = e.target;
 var txt = '';

 while (node.nodeName != 'BLOCKQUOTE') {
  txt += 
   'Name: ' + node.nodeName + '\n' +
   'ID: ' + $(node.nodeName).attr('id') + '\n' +
   'Class: ' + $(node.nodeName).attr('class') + '\n' +
   'CE: ' + $(node.nodeName).attr('contenteditable') + '\n\n';

  node = node.parentNode;
 }
})

returns:

Name: I
ID: undefined
Class: undefined
CE: undefined

Name: B
ID: undefined
Class: undefined
CE: undefined

Name: DIV
ID: comment
Class: ib
CE: true

Name: DIV
ID: comment
Class: ib
CE: true

I understand why it's doing it... using jQuery's $(node.nodeName) means that it's reading from the top of the page to the first $('DIV') and returning it's attribute. And that makes sense.

But what I don't know is how to correctly get the attribute for the node that I'm on?

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <style media="screen"> font { display: block; margin: 1em; } </style> </head> <body> <font face="Arial" size="4">We all know that "font" is a deprecated HTML element</font> <font face="Verdana" size="5">It is very difficult to change a person's habits</font> <script> (function( d ) { 'use strict'; var c, font = d.getElementsByTagName( 'font' ), fac = [], siz = []; for ( c = 0; c < font.length; c ++ ) { fac.push( font[ c ].getAttribute( 'face' ) ); siz.push( font[ c ].getAttribute( 'size' ) ); console.log( 'face = "' + fac[ c ] + '" , size = "' + siz[ c ] + '"\n' ); } }( document )); </script> </body> </html>

Getting attributes for current node

csdude55

csdude55

birdbrain

csdude55

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week