web_development:js:js-get-set

Getting / Setting Node Values

It is always preferable to create a variable to store data and then append, rather than append, append, append.

//bad
element.outerHTML = '<div class="test">';
element.outerHTML += '<h1>Text content</h1>';
element.outerHTML += '</div>';

//good
var output = '<div class="test">';
output += '<h1>Text content</h1>';
output += '</div>';

element.outerHTML = output;

Getting Element Node Values
.innerHTML
.innerText
.textContent
.outerHTML
.outerText

Getting Text Node Values
.data
.nodevalue

/********************************
 * data and nodeValue for
 * Text Nodes
 * 1.3.5.5
 *
 *******************************/
// var a = document.querySelector( 'a' ),
//     aText = a.firstChild,
//     aAtts = a.attributes;
//
//
// console.log( aText.data );
// console.log( aText.nodeValue );
//
// console.log( aAtts );
//
// console.log( aAtts[0].data );
// console.log( aAtts[0].nodeValue );



/********************************
 * Setting data and nodeValue
 * 1.3.5.6
 *
 *******************************/

// var a = document.querySelector( 'a' ),
//     aText = a.firstChild;

// aText.data = 'Follow me on Twitter';
// aText.nodeValue = '@hijacked';

// if ( 3 === aText.nodeType ) {
//   aText.nodeValue = '@confirmed';
// }

.nodeName
.nodeValue

/********************************
 * Getting Attribute Nodes
 * 1.3.6.1
 *
 *******************************/
// var a = document.querySelector( 'a' ),
//     atts = a.attributes;
//
// console.log( atts );
//
//
// for( var i = 0, max = atts.length; i < max; i++ ) {
//
//    console.log( atts[i].nodeName +
//                 ': ' +
//                 atts[i].nodeValue );
//
// }

/********************************
 * Get a specific Attribute
 * 1.3.6.2
 *
 *******************************/
// var a = document.querySelector( 'a' ),
//     aTitle = a.getAttribute( 'title' ),
//     aHref = a.getAttribute( 'href' );
//
// console.log( aTitle );
// console.log( aHref );

/********************************
 * Set an Attribute
 * 1.3.6.3
 *
 *******************************/
// var a = document.querySelector( 'a' );
//
//
// a.setAttribute( 'href' , 'https://twitter.com/jsforwp' );
// a.setAttribute( 'id', 'twitter' )
//
// console.log( a.getAttribute( 'href' ) );
// console.log( a.getAttribute( 'id' ) );

/********************************
 * Working with Classes
 * 1.3.6.4
 *
 *******************************/
// var content = document.querySelector( '.content' );

// console.log( content.getAttribute( 'class' ) );
// console.log( content.className );
// console.log( content.classList );

// content.classList.add( 'active' );
// content.classList.remove( 'active' );
// content.classList.toggle( 'active' );

// console.log( content.classList );

/********************************
 * Data Attributes
 * 1.3.6.5
 *
 *******************************/
var contact = document.getElementById( 'contact' );

console.log( contact.getAttribute( 'data-time' ) );

console.log( contact.dataset );

console.log( contact.dataset.location );

contact.dataset.location = 'Asheville';
console.log( contact.dataset.location );

Getting / Setting attr:
.getAttribute( 'what_you_want' )
.setAttribute( 'what_you_want_to_change', 'what_you_want_to_change_it_to' )

Getting / Setting classes:
.getAttribute( 'class' )
.className
.classList

getting data attr:
.getAttribute( 'data-attr' ) eg. bad
.dataset eg. good

  • web_development/js/js-get-set.txt
  • Last modified: 2020/09/18 01:46
  • by jimboobrien