Decide which characteristics to serialize

Question

Decide which characteristics to serialize

When converting a div into a string using

new XMLSerializer().serializeToString()

, I want to be able to select specific DOM attributes for serialization.

For instance:

let element1 = document.getElementById('element1');
element1.style.color = "blue";
console.log(new XMLSerializer().serializeToString(element1));

#element1 { font-size: 16px; }

<div id="element1">Hello</div>

Instead of ...

<div xmlns="http://www.w3.org/1999/xhtml" id="element1" style="color: blue;">Hello</div>

...I would like to serialize all attributes except the color style attribute:

<div xmlns="http://www.w3.org/1999/xhtml" id="element1">Hello</div>

Is there a way to specify which attributes to include in the serialization when using

new XMLSerializer().serializeToString()

?

javascript css dom serialization xml-serialization

Answer 1

Answer №1

Make a deep copy of the tree using node.cloneNode(true) and insert it into a DocumentFragment
Utilize
```
fragment.querySelectorAll("[style]")
```
to locate all elements with the specified attribute for removal
Delete the attributes from the matched elements
Serialize the fragment

var blah = document.getElementById('blah');
var blah1 = document.getElementById('blah1');

blah1.style.top = "100px";

var frag = new DocumentFragment()
frag.appendChild(blah.cloneNode(true))

for(var e of frag.querySelectorAll("[style]")) {
   e.removeAttribute("style")
}

console.log(new XMLSerializer().serializeToString(frag))

Successfully tested on Firefox version 33

Answer 2

Make a deep copy of the tree using node.cloneNode(true) and insert it into a DocumentFragment
Utilize
```
fragment.querySelectorAll("[style]")
```
to locate all elements with the specified attribute for removal
Delete the attributes from the matched elements
Serialize the fragment

var blah = document.getElementById('blah');
var blah1 = document.getElementById('blah1');

blah1.style.top = "100px";

var frag = new DocumentFragment()
frag.appendChild(blah.cloneNode(true))

for(var e of frag.querySelectorAll("[style]")) {
   e.removeAttribute("style")
}

console.log(new XMLSerializer().serializeToString(frag))

Successfully tested on Firefox version 33

Decide which characteristics to serialize

Answer №1

Similar questions

Optimal strategy for Retrofitting all JavaScript files to substitute <myArrayObj>.forEach(iteratorFn) with _.each(<myArrayObj>, iteratorFn)

Using the jQuery plugin multiple times within one website

I'm receiving the error message "Fatal error: Call to a member function query() on a non-object," what could be causing this issue?

Focusing on specific parents to target the same children using CSS and jQuery selectors

What is the best way to preserve the state of a component in Angular?

Having difficulty transforming shapefiles into geojson

Issues with the last-child selector in CSS being unresponsive

Interactive pop-up window featuring conversational chat boxes

Hot Loader does not accept this React component for hot reloading

I'm attempting to access a PHP file by clicking a button using AJAX and jQuery

How come my post isn't being saved to the page after I refresh it?

Transfer the values selected from checkboxes into an HTML input field

Steer clear of using the onRowClick event if an outputLink is clicked within a RichFaces datatable

Ways to retrieve keys from the json object below

What is the best way to manage the maximum number of concurrent AJAX requests?

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

Modification of text within a text field via a context menu Chrome Extension

The issue of double submission persists, with the prevention of the default action

Determining the best times to utilize Grid items for alignment and justification versus when to avoid using them

What is the best way to adjust my column position in order to make the links clickable?