Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: open

Message Too Old, No Replies

Getting attributes for current node

     
8:48 pm on Aug 4, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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?
12:05 am on Aug 5, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


I figured it out...

"ID: " + node.getAttribute('id') + '\n' +
"Class: " + node.getAttribute('class') + '\n' +
"Data: " + node.dataset.ce + '\n'


But while we're playing in that same loop, any thoughts on how to get the font family and size out of:

<font face="Arial" size="4">...</font>
4:14 pm on Aug 5, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there csdude55,


does this help




<!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>


birdbrain
6:55 pm on Aug 5, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


It does, thanks! In my case, it's:

node.getAttribute('face'); // or ('size')

I should have thought of that myself...

We all know that "font" is a deprecated HTML element
It is very difficult to change a person's habits

FWIW, the problem is that document.execCommand() only inserts a <font> tag. There's a "StyleWithCSS" option, but it doesn't work with any version of IE so using it just forces me to code for both CSS and <font> tags.