Egenskaper
Objektet window har många egenskaper. Det ärver egenskaper från gränssnittet EventTarget och implementerar egenskaper från mixins WindowOrWorkerGlobalScope och WindowEventHandlers.
window.closed
Gegenskapen closed är en skrivskyddad egenskap som anger om det refererade webbläsarfönstret är stängt eller inte. Den är true om fönstret är stängt och false annars. Om du till exempel kör:
console.log(window.closed)
på det för närvarande öppnade fönstret ska det loggas false eftersom webbläsarfönstret uppenbarligen är öppet.
window.console
Gegenskapen console är ett objekt med många egenskaper som är användbara för att logga information till webbläsarens konsol. Det är ett skrivskyddat objekt. console-metoderna är användbara för felsökning och bör inte användas för att presentera information för slutanvändare. console-objektet har följande metoder:
-
console.assert()– loggar ett meddelande och stacktrace till konsolen om det första argumentet är -
console.clear()– rensar konsolen -
console.count()– loggar antalet gånger den här metoden har anropats med koden given etikett -
console.countReset()– återställer värdet på räknaren för den givna etiketten -
console.debug()– loggar ett meddelande till konsolen med loggnivån ”debug” -
console.dir()– listar egenskaperna för det givna JavaScript-objektet. Innehållet kommer att ha trianglar för att visa innehållet i underordnade objekt. -
console.dirxml()– visar en HTML- eller XML-representation av objektet om möjligt -
console.error()– loggar ett felmeddelande till konsolen. Vi kan använda strängersättning och ytterligare argument för att formatera loggmeddelandet. -
console.group()– skapar en grupp av konsolmeddelanden, indragna med nivåer. Vi kan flytta oss från en nivå medgroupEnd(). -
console.groupCollapsed()– skapar en grupp av konsolmeddelanden, indragna av nivåer med objekten hopfällda. Vi kan lämna en nivå medgroupEnd(). -
console.groupEnd()– avslutar den aktuella inline-gruppen -
console.info()– loggar informationsmeddelanden. Vi kan använda strängersättning och ytterligare argument för att formatera loggmeddelandet. -
console.log()– används för allmän loggning av information. Vi kan använda strängersättning och ytterligare argument för att formatera loggmeddelandet. -
console.table()– loggar och visar data i tabellformat -
console.time()– startar en timer med det namn som anges i parametern. 10000 samtidiga timers kan köras på en viss sida -
console.timeEnd()– stoppar den angivna timern och loggar den förflutna tiden i sekunder sedan den startade -
console.timeLog()– loggar värdet av den angivna timern till konsolen -
console.trace()– loggar en stacktrace -
console.warn()– loggar ett varningsmeddelande till konsolen. Vi kan använda strängersättning och ytterligare argument för att formatera loggmeddelandet.
window.customElements
Gegenskapen customElements är en skrivskyddad egenskap som returnerar en referens till CustomElementRegistry-objektet, som kan användas för att registrera nya anpassade element och få information om tidigare registrerade anpassade element. Anpassade element kallas också för webbkomponenter.
Web Components är en standard som låter oss skapa anpassade element som kapslar in andra HTML-element. Vi behöver detta så att vi kan återanvända grupper av HTML-element på olika ställen. Utan den måste vi upprepa samma grupp HTML-element på olika ställen om vi vill återanvända dem. Definierade anpassade element lagras i CustomElementRegistry så att webbläsare vet att det definierade anpassade elementet faktiskt är ett giltigt element.
För att definiera ett anpassat element kan vi använda egenskapen customElements som i följande kod:
const customElementRegistry = window.customElements;
customElementRegistry.define('hello-element',
class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({
mode: 'open'
});
const span = document.createElement('span');
span.setAttribute('class', 'wrapper');
span.innerHTML = 'Hello';
shadow.appendChild(span);
}
});
Sedan i HTML-filen lägger vi till:
<hello-element></hello-element>
I koden ovan använde vi metoden define för window.customElements-objektet. I det första argumentet för define-metoden skickar vi in elementnamnet. I det andra elementet skickar vi sedan in en HTMLElement-klass, som faktiskt är ett objekt i JavaScript. I constructor-metoden för class skapar vi ett span-element med innerHTML inställt på 'Hello' och lägger sedan till det till skuggroten, som är roten till webbkomponenten. Om vi kör koden ovan bör vi se ordet Hello visas på skärmen.
Metoden define tar emot tre argument. Det första är name, som är en sträng som har namnet på det anpassade elementet. Det andra argumentet är en HTMLElement konstruktör, där vi i konstruktörsklassen skapar de HTML-element som vi vill fästa vid skuggroten och visar de skapade elementen. Det tredje argumentet är ett valfritt argument som styr hur elementen definieras. Den enda egenskap som stöds är extends-egenskapen, som är en sträng som låter oss ange det inbyggda elementet som ska förlängas. Det är användbart för att skapa ett anpassat element som anpassar ett inbyggt element som div , span eller p.
.