JavaScript - anyway to remove all base methods and attributes of an Object but keep one?

Question

I'm building some app which scans the DOM for elements and their children. Right now, I can get the data I need with the following line of code:

var bodyObj = document.getElementsByTagName("BODY")[0].children;

The problem, that the bodyObj object is spammed with unnecessary methods and attributes, I only want to keep the children method and clean the rest. Any way of achieving this?

PS Pure Js.

"scans the DOM for elements and their children", have you looked at querySelector/querySelectorAll? Also children is not a method its just a collection of the elements child nodes. If you dont want all the DOM methods/properties then just take the data you want from the element and store it somewhere else — Patrick Evans
– Patrick Evans, Commented May 17, 2016 at 13:21
Can you provide more info what exactly is bothering you? DOM elements have the API hey have. If you only care about part of their data, extract it into another object, as Evans suggested. Adding or removing properties to/from a DOM element is not a good idea. — Felix Kling
– Felix Kling, Commented May 17, 2016 at 13:30
I'm building a script to "visualize" the DOM, so I need to keep track of all elements with their children (and maybe their children and so on). I thought keeping this as an object since there could me many levels of children, array will be much more difficult to maintain. — Alex
– Alex, Commented May 17, 2016 at 13:36
Why don't you just directly work with the DOM element then? It is already an object and it has the most accurate representation, since it's the DOM element itself. I don't see any benefits of preprocessing the data. — Felix Kling
– Felix Kling, Commented May 17, 2016 at 15:34

Community · Accepted Answer · 2017-05-23 11:44:03Z

Body object with only the `children` property

You might think to try something like:

var bodyObj = document.getElementsByTagName("BODY")[0];

for (var key in bodyObj){
    if (bodyObj.hasOwnProperty(key) && key != 'children'){
        delete bodyObj[key];
    }
}

...like Florian Cabirol suggested in their answer. However, the <body> object's properties are non-enumerable, meaning they won't show up in the loop. To get the non-enumerable properties, you might try (in ES5+):

Object.getOwnPropertyNames(bodyObj);

But it still won't get them. Next, you might think, "I'll just make an array of all possible property/method names that are in HTMLBodyElements, and loop through them, removing them if they exist." However, if you do something like:

delete bodyObj.baseURI;
console.log(bodyObj.baseURI);

You'll notice that it didn't delete it. That's because you can't remove properties from a DOM object. Attempts to redefine them or to delete them will silently fail.

Body object's `children`'s `HTMLElement`s

To get document.getElementsByTagName("BODY")[0].children without any of its properties/methods, you could do:

var bodyObj = document.getElementsByTagName("BODY")[0].children;

bodyObj = Object.keys(bodyObj).map(function(key) { return bodyObj[key]; });

This would convert it from an HTMLCollection to an array, if you're okay with that. You could always wrap it in an object: bodyObj = {children: bodyObj};.

Florian Cabirol · Accepted Answer · 2016-05-17 13:20:44Z

0

You can do something like this :

for (var key in bodyObj){
    if (bodyObj.hasOwnProperty(key) && key != 'children'){
        delete bodyObj[key];
    }
}

answered May 17, 2016 at 13:20

Florian Cabirol

1855 bronze badges

Collectives™ on Stack Overflow

JavaScript - anyway to remove all base methods and attributes of an Object but keep one?

2 Answers 2

Body object with only the `children` property

Body object's `children`'s `HTMLElement`s

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Body object with only the children property

Body object's children's HTMLElements

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Body object with only the `children` property

Body object's `children`'s `HTMLElement`s