Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post

    How do I globally change an attribute?

    Let's say I wanted to change every "title" attribute in a page to "sometitle", how would I do that?

    So something like:
    Code:
    <a title="fred">Fred</a>
    becomes:
    Code:
    <a sometitle="fred">Fred</a>
    I assume it would be using some sort of foreach loop, using some sort of code like:
    Code:
    forEach(function(q))
      {
      q.sometitle=q.title;
      delete q.title;
      }
    but I'm not sure how exactly to put it together. Do I need to initialize the sometitle attribute first? Plus, how do I loop through each element in the dom?

    Thanks for any help.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Code:
    [].slice.call(document.querySelectorAll("[title]")).forEach(function(elm){
      elm.title= 'sometitle' ;
    });
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,132
    Thanks
    12
    Thanked 332 Times in 328 Posts
    Quote Originally Posted by jkurrle View Post
    Let's say I wanted to change every "title" attribute in a page to "sometitle", how would I do that?

    So something like:
    Code:
    <a title="fred">Fred</a>
    becomes:
    Code:
    <a sometitle="fred">Fred</a>
    you could add the custom "sometitle" attribute and empty the "title" attribute, but deleting DOM attributes is not an option (and I’m not sure this is even possible).
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Dormilich View Post
    you could add the custom "sometitle" attribute and empty the "title" attribute, but deleting DOM attributes is not an option (and I’m not sure this is even possible).
    i use a.removeAttribute("href") often, same with title, and you can removeNode on the attrib node in browsers that still map dom0+1...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,132
    Thanks
    12
    Thanked 332 Times in 328 Posts
    which is pretty much the same.
    Quote Originally Posted by DOM2
    removeAttribute()
    Removes an attribute by name. If the removed attribute is known to have a default value, an attribute immediately appears containing the default value as well as the corresponding namespace URI, local name, and prefix when applicable.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by jkurrle View Post
    Let's say I wanted to change every "title" attribute in a page to "sometitle", how would I do that?
    Readable code:

    Code:
    function swap_attributes() {
    	var titled_elements = document.querySelectorAll("[title]");
    	var i = 0;
    	while (i < titled_elements.length) {
    		titled_elements[i].setAttribute("data-alt-title", titled_elements[i].getAttribute("title"));
    		titled_elements[i].removeAttribute("title");
    		i += 1;
    	}
    }
    Live at: https://patrick.dark.name/web.dev/cf...thread.296297/.

    Note that sometitle would not be a valid attribute in HTML. At least one browser I tested wouldn't allow me to set it using setAttribute. HTML only supports custom attributes prefixed with data- unless you're using XHTML, in which case you would have to put sometitle into a custom namespace via setAttributeNS.

    Quote Originally Posted by rnd me View Post
    you can removeNode on the attrib node in browsers that still map dom0+1...
    This feature is actually as recent as DOM3, but is removed in DOM4. Browsers used to treat attributes as manipulable nodes with methods like removeAttributeNode.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •