Können Sie in Javascript das DOM erweitern?

Lesezeit: 4 Minuten

In Javascript können Sie vorhandene Klassen erweitern, indem Sie das Prototypobjekt verwenden:

String.prototype.getFirstLetter = function() {
    return this[0];
};

Ist es möglich, diese Methode zu verwenden, um DOM-Elemente zu erweitern?

Ich fand die Antwort gerade, als ich die Frage schrieb, dachte aber, ich würde trotzdem posten, um die Informationen zu teilen.

Das Objekt, das Sie erweitern müssen, ist Element.prototype.

Element.prototype.getMyId = function() {
    return this.id;
};

Konnen Sie in Javascript das DOM erweitern
geowa4

Sie können das DOM erweitern, indem Sie den Prototyp des Elements verwenden. Dies funktioniert jedoch nicht in IE7 und früheren Versionen. Sie müssen das spezifische Element einzeln erweitern. Die Prototype-Bibliothek tut dies. Ich empfehle, durch die zu schauen Quelle um genau zu sehen, wie es gemacht wird.

  • Beachten Sie, dass dies nur für IE6 und IE7 erforderlich sein sollte, da IE8 dies unterstützt. Sehen msdn.microsoft.com/en-us/library/dd282900(VS.85).aspx.

    – Michael Madson

    23. April 09 um 1:02 Uhr

  • Ja, IE8 hat große Fortschritte bei der DOM-Manipulation gemacht, aber die vollständige Unterstützung steht im Moment nicht ganz oben auf meiner Prioritätenliste

    – geowa4

    23. April 09 um 1:05 Uhr

Konnen Sie in Javascript das DOM erweitern
James

Sie sollten nichts direkt erweitern (mit “irgendetwas” meine ich native DOM-Objekte) – das führt nur zu schlechten Dingen. Außerdem fügt das erneute Erweitern jedes neuen Elements (etwas, das Sie tun müssten, um IE zu unterstützen) zusätzlichen Overhead hinzu.

Warum nicht den jQuery-Ansatz nehmen und stattdessen einen Wrapper/Konstruktor erstellen und diesen erweitern:

var myDOM = (function(){
    var myDOM = function(elems){
            return new MyDOMConstruct(elems);
        },
        MyDOMConstruct = function(elems) {
            this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems];
            return this;
        };
    myDOM.fn = MyDOMConstruct.prototype = {
        forEach : function(fn) {
            var elems = this.collection;
            for (var i = 0, l = elems.length; i < l; i++) {
                fn( elems[i], i );
            }
            return this;
        },
        addStyles : function(styles) {
            var elems = this.collection;
            for (var i = 0, l = elems.length; i < l; i++) {
                for (var prop in styles) {
                    elems[i].style[prop] = styles[prop];
                }
            }
            return this;
        }
    };
    return myDOM;
})();

Dann können Sie Ihre eigenen Methoden über hinzufügen myDOM.fn … Und Sie können es so verwenden:

myDOM(document.getElementsByTagName('*')).forEach(function(elem){
    myDOM(elem).addStyles({
        color: 'red',
        backgroundColor : 'blue'
    });
});

  • “Du solltest nichts direkt verlängern – das führt nur zu schlechten Dingen.” Es wird zu guten Dingen führen, wenn Sie einen guten Grund dafür haben und Ihren Code richtig schreiben. Abgesehen von Interoperabilitätsproblemen gibt es keinen Grund, Element.prototype nicht zu erweitern; für andere Standardobjekte kann viel Gutes erreicht werden (siehe Hinzufügen von Formatierungsmethoden zu Date.prototype oder Escape zu RegExp.prototype). Es ist dumm, auf vollkommen nützliche OO-Praktiken zu verzichten, wenn sie verfügbar und nützlich sind.

    – Lidlosigkeit

    23. April 09 um 8:55 Uhr

  • Wir sprechen nicht über die JavaScript-Sprache und Designmuster oder ähnliches. Hier geht es um das DOM – das Erweitern nativer DOM-Objekte ist keine gute Idee; Ganz zu schweigen davon, dass es nicht in allen Browsern richtig funktioniert …

    – James

    23. April 2009 um 9:13 Uhr

  • Früher war es eine schlechte Idee, jetzt nicht mehr so ​​schlimm. github.com/nbubna/mind-hacking/blob/gh-pages/…

    – Nathan Bubna

    13. August 13 um 22:27 Uhr

Konnen Sie in Javascript das DOM erweitern
Nitsan Ben Hanoch

Falls jemand danach sucht (ich weiß, dass ich es war), hier sind die JavaScript-Typen aller HTML-Tags:

interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "applet": HTMLAppletElement;
    "area": HTMLAreaElement;
    "article": HTMLElement;
    "aside": HTMLElement;
    "audio": HTMLAudioElement;
    "b": HTMLElement;
    "base": HTMLBaseElement;
    "bdi": HTMLElement;
    "bdo": HTMLElement;
    "blockquote": HTMLQuoteElement;
    "body": HTMLBodyElement;
    "br": HTMLBRElement;
    "button": HTMLButtonElement;
    "canvas": HTMLCanvasElement;
    "caption": HTMLTableCaptionElement;
    "cite": HTMLElement;
    "code": HTMLElement;
    "col": HTMLTableColElement;
    "colgroup": HTMLTableColElement;
    "data": HTMLDataElement;
    "datalist": HTMLDataListElement;
    "dd": HTMLElement;
    "del": HTMLModElement;
    "details": HTMLDetailsElement;
    "dfn": HTMLElement;
    "dialog": HTMLDialogElement;
    "dir": HTMLDirectoryElement;
    "div": HTMLDivElement;
    "dl": HTMLDListElement;
    "dt": HTMLElement;
    "em": HTMLElement;
    "embed": HTMLEmbedElement;
    "fieldset": HTMLFieldSetElement;
    "figcaption": HTMLElement;
    "figure": HTMLElement;
    "font": HTMLFontElement;
    "footer": HTMLElement;
    "form": HTMLFormElement;
    "frame": HTMLFrameElement;
    "frameset": HTMLFrameSetElement;
    "h1": HTMLHeadingElement;
    "h2": HTMLHeadingElement;
    "h3": HTMLHeadingElement;
    "h4": HTMLHeadingElement;
    "h5": HTMLHeadingElement;
    "h6": HTMLHeadingElement;
    "head": HTMLHeadElement;
    "header": HTMLElement;
    "hgroup": HTMLElement;
    "hr": HTMLHRElement;
    "html": HTMLHtmlElement;
    "i": HTMLElement;
    "iframe": HTMLIFrameElement;
    "img": HTMLImageElement;
    "input": HTMLInputElement;
    "ins": HTMLModElement;
    "kbd": HTMLElement;
    "label": HTMLLabelElement;
    "legend": HTMLLegendElement;
    "li": HTMLLIElement;
    "link": HTMLLinkElement;
    "main": HTMLElement;
    "map": HTMLMapElement;
    "mark": HTMLElement;
    "marquee": HTMLMarqueeElement;
    "menu": HTMLMenuElement;
    "meta": HTMLMetaElement;
    "meter": HTMLMeterElement;
    "nav": HTMLElement;
    "noscript": HTMLElement;
    "object": HTMLObjectElement;
    "ol": HTMLOListElement;
    "optgroup": HTMLOptGroupElement;
    "option": HTMLOptionElement;
    "output": HTMLOutputElement;
    "p": HTMLParagraphElement;
    "param": HTMLParamElement;
    "picture": HTMLPictureElement;
    "pre": HTMLPreElement;
    "progress": HTMLProgressElement;
    "q": HTMLQuoteElement;
    "rp": HTMLElement;
    "rt": HTMLElement;
    "ruby": HTMLElement;
    "s": HTMLElement;
    "samp": HTMLElement;
    "script": HTMLScriptElement;
    "section": HTMLElement;
    "select": HTMLSelectElement;
    "slot": HTMLSlotElement;
    "small": HTMLElement;
    "source": HTMLSourceElement;
    "span": HTMLSpanElement;
    "strong": HTMLElement;
    "style": HTMLStyleElement;
    "sub": HTMLElement;
    "summary": HTMLElement;
    "sup": HTMLElement;
    "table": HTMLTableElement;
    "tbody": HTMLTableSectionElement;
    "td": HTMLTableDataCellElement;
    "template": HTMLTemplateElement;
    "textarea": HTMLTextAreaElement;
    "tfoot": HTMLTableSectionElement;
    "th": HTMLTableHeaderCellElement;
    "thead": HTMLTableSectionElement;
    "time": HTMLTimeElement;
    "title": HTMLTitleElement;
    "tr": HTMLTableRowElement;
    "track": HTMLTrackElement;
    "u": HTMLElement;
    "ul": HTMLUListElement;
    "var": HTMLElement;
    "video": HTMLVideoElement;
    "wbr": HTMLElement;
}

Entnommen aus “lib.dom.d.ts” (mit vs-code ausgeliefert).

.

504380cookie-checkKönnen Sie in Javascript das DOM erweitern?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy