New Rule: Disallow DOM exploration properties

[jsphstls]

This is not a great way to select elements, but is allowed:
parentElement.parentElement.parentElement

It would be great if there were an optional rule that discouraged the use of properties such as parentElement, previousSibling, and the rest.

The rule could be highly configurable by allowing each property key to be enabled or disabled. It could also allow a certain level of traversing so that one use of a property is okay, but a chain is not.

[Belco90]

This is a really good idea! I guess this rule should prevent some of Node properties from being used but we need to agree which ones (I guess those returning another Node).

I love the idea of restricting level of traversing them, but I think we need to think about how we want to config this: for all the properties? by individual properties? both?

The rule could be named like no-node-access or something similar, what you think?

[jsphstls]

That's a good name. I'm not familiar with rule creation but I have seen that rule configuration can become problematic. What if the rule begins with no configuration and then configuration is added based on input after release?

I think starting with a default list of properties that return another node is safe. I don't think traverse level should be set by property.

[Belco90]

I'm happy with restricting all the rules returning another node for first approach (without enabling the rule by default in any shareable config) and the we see what we do. How should the traverse level work then?

[jsphstls]

The traverse level can be an integer property, similar to complexity. This could help with adoption as the level is gradually decreased while making fixes in a codebase.

Maybe we are looking at two different rules? One that handles traverse level at a minimum of one and another that disallows all properties but also allows whitelisting?

[Belco90]

Mmm I like the idea about splitting this in two different rules. What do you think @emmenko @thomlom ?

[emmenko]

Sure we can give it a try. I'm still trying to wrap my head around the workings of the rule but maybe when I see some concrete examples things will be clearer.

[thomaslombart]

That sounds good to me too but I would go with one rule only. Having two rules would be more confusing as they're closely related.

Configuration-wise, we could have something like:

"no-node-access": ["error", { allowedProperties: [...], max: 2 }]

[Belco90]

@thomlom Fair enough, your proposal seems best approach for now. @jsphstls do you want to give this rule a try?

[jsphstls]

I cannot promise enough time or expertise, so it is open to anyone really. This got more momentum than I expected 😅

[thomaslombart]

Anyone for this issue? 🙂

[thebinaryfelix]

Hey guys! So, if I've understood correctly, this rule should throw an error message when the user tries to select a DOM Node by traversing through multiple Nodes.

The config would be set as "no-node-access": ["error", { allowedProperties: [...], max: 2 }] where:

• allowedProperties: is a list of properties that return another Node set by the user, with default being empty [].
• max: integer that represents the number of levels which can be traversed, similar to complexity rule

Some examples

incorrect

/* no-node-access: ['error'] */

const node = container.firstChild

/* no-node-access: ['error', { max: 1 }] */

const node = container.firstChild.firstChild

/* no-node-access: ['error', { max: 2 }] */

const node = container.firstChild.firstChild.nextSibling

/* no-node-access: ['error', { allowedProperties: ['nextSibling'], max: 1 }] */

const node = container.firstChild.nextSibling.firstChild

correct

/* no-node-access: ['error', { max: 1 }] */

const node = container.firstChild.nodeName // as nodeName returns a DOMString

/* no-node-access: ['error', { allowedProperties: ['firstChild'] }] */

const node = container.firstChild.firstChild // as firstChild is listed in allowedProperties

/* no-node-access: ['error', { allowedProperties: ['firstChild'], max: 1 }] */

const node = container.firstChild.firstChild.nextSibling

/* no-node-access: ['error', { allowedProperties: ['nextSibling'], max: 2 }] */

const node = container.firstChild.nextSibling.firstChild

Did I get it right? Are there any other considerations regarding the implementation of this rule or anyone already working on it? If not, I'd like to give it a try :)