Search completed in 0.96 seconds.
Node.nodeName - Web APIs
the
nodename read-only property returns the name of the current node as a string.
... syntax var str = node.
nodename; value a domstring.
... values for the different types of nodes are: interface
nodename value attr the value of attr.name cdatasection "#cdata-section" comment "#comment" document "#document" documentfragment "#document-fragment" documenttype the value of documenttype.name element the value of element.tagname entity the entity name entityreference the name of entity reference notation the notation name processinginstruction the value of processinginstruction.target text "#text" example given the following markup: <div id="d1">hello world</div> <input type="text" id="t"> and the following script: var div1 = document.getelementbyid("d1"); var text_field = ...
...And 6 more matches
JXON - Archive of obsolete content
onode.nodevalue.trim() : onode.nodevalue; } // nodetype is "text" (3) or "cdatasection" (4) else if (onode.nodetype === 1 && !onode.prefix) { // nodetype is "element" (1) sprop = onode.
nodename.tolowercase(); vcontent = new jxontree(onode); if (this.hasownproperty(sprop)) { if (this[sprop].constructor !== array) { this[sprop] = [this[sprop]]; } this[sprop].push(vcontent); } else { this[sprop] = vcontent; nlength++; } } } this.keyvalue = parsetext(scollectedtxt); } else { this.keyvalue = null; } if (oparentnode.hasattributes &...
...onode.nodevalue.trim() : onode.nodevalue; } else if (onode.nodetype === 1 && !onode.prefix) { sprop = onode.
nodename.tolowercase(); vcontent = new jxontree(onode); if (this.hasownproperty(sprop)) { if (this[sprop].constructor !== array) { this[sprop] = [this[sprop]]; } this[sprop].push(vcontent); } else { this[sprop] = vcontent; } } } if (scollectedtxt) { this.keyvalue = parsetext(scollectedtxt); } } if (oparentnode.hasattributes && oxmlparent.hasatt...
...nt.childnodes.item(nitem); if (onode.nodetype === 4) { scollectedtxt += onode.nodevalue; } /* nodetype is "cdatasection" (4) */ else if (onode.nodetype === 3) { scollectedtxt += onode.nodevalue.trim(); } /* nodetype is "text" (3) */ else if (onode.nodetype === 1 && !onode.prefix) { /* nodetype is "element" (1) */ if (nlength === 0) { vresult = {}; } sprop = onode.
nodename.tolowercase(); vcontent = getjxontree(onode); if (vresult.hasownproperty(sprop)) { if (vresult[sprop].constructor !== array) { vresult[sprop] = [vresult[sprop]]; } vresult[sprop].push(vcontent); } else { vresult[sprop] = vcontent; nlength++; } } } } if (scollectedtxt) { nlength > 0 ?
...And 2 more matches
context-menu - Archive of obsolete content
the example above works because <img> elements can't contain other elements, but in the example below, node.
nodename is not guaranteed to be "p" - for example, it won't be "p" if the user context-clicked a link inside a paragraph: var cm = require("sdk/context-menu"); cm.item({ label: "a paragraph", context: cm.selectorcontext("p"), contentscript: 'self.on("context", function (node) {' + ' console.log(node.
nodename);' + ' return true;' + '});' }); the...
... for example, suppose your add-on looks like this: var script = "self.on('click', function (node, data) {" + " console.log('clicked: ' + node.
nodename);" + "});"; var cm = require("sdk/context-menu"); cm.item({ label: "body context", context: cm.selectorcontext("body"), contentscript: script }); this add-on creates a context-menu item that uses selectorcontext to display the item whenever the context menu is activated on any descendant of the <body> element.
... when clicked, the item just logs the
nodename property for the node passed to the click handler.
... if you run this add-on you'll see that it always logs "body", even if you click on a paragraph element inside the page: info: contextmenu-example: clicked: body by contrast, this add-on uses the pagecontext: var script = "self.on('click', function (node, data) {" + " console.log('clicked: ' + node.
nodename);" + "});"; var cm = require("sdk/context-menu"); cm.item({ label: "body context", context: cm.pagecontext(), contentscript: script }); it will log the name of the actual node clicked: info: contextmenu-example: clicked: p the "data" argument data is the data property of the menu item that was clicked.
Introduction to the DOM - Web APIs
alert(paragraphs[0].
nodename); all of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the document object that represents the document itself, the table object that implements the special htmltableelement dom interface for accessing html tables, and so forth).
...though we focus exclusively on javascript in this reference documentation, implementations of the dom can be built for any language, as this python example demonstrates: # python dom example import xml.dom.minidom as m doc = m.parse(r"c:\projects\py\chap1.xml") doc.
nodename # dom property of document object p_list = doc.getelementsbytagname("para") for more information on what technologies are involved in writing javascript on the web, see javascript technologies overview.
... const table = document.getelementbyid("table"); const tableattrs = table.attributes; // node/element interface for (let i = 0; i < tableattrs.length; i++) { // htmltableelement interface: border attribute if(tableattrs[i].
nodename.tolowercase() == "border") table.border = "1"; } // htmltableelement interface: summary attribute table.summary = "note: increased border"; core interfaces in the dom this section lists some of the most commonly-used interfaces in the dom.
On page load - Archive of obsolete content
if you only want to handle documents, ensure aevent.originaltarget.
nodename == "#document" .
... if(gbrowser) gbrowser.addeventlistener("domcontentloaded", this.onpageload, false); }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered the event var win = doc.defaultview; // win is the window for the doc // test desired conditions and do something // if (doc.
nodename != "#document") return; // only documents // if (win != win.top) return; //only top window.
QuerySelector - Archive of obsolete content
[object xulelement] ]]></script> document.prototype.$ = function (selector) { // only for plain xml return this.queryselector(selector); }; var foo = document.implementation.createdocument('somens', 'foo', null); // create an xml document <foo xmlns="somens"/> var bar = foo.createelementns('somens', 'bar'); // add <bar xmlns="somens"/> foo.documentelement.appendchild(bar); alert(foo.$('bar').
nodename); // gives 'bar' element.prototype.$ = function (selector) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.getelementsbytagname('h1')[0].$('a').
nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="te...
...xt/javascript"><![cdata[ element.prototype.$ = function (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; alert(document.getelementsbytagnamens(xulns, 'hbox')[0].$('vbox').
nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.getelementsbytagnamens('somens', 'foo')[0]; alert(foo.$('bar')); note that for plain xml, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type id in xml, though it is in html and xul), nor will it work with xml:id.
getAttributeNS - Archive of obsolete content
tes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being searched (escape period since only character (besides colon) allowed in an xml name which needs escaping) for (var j = 0; j < attrs.length; j++) { // thisitem's atts // e.g., abc:href, xlink:href while (((result = prefixatt.exec(attrs[j].
nodename)) !== null) && thisitem.
nodename !== '#document' && thisitem.
nodename !== '#document-fragment') { var xmlnsprefix = new regexp('^xmlns:'+result[1]+'$'); // e.g., xmnls:xl, xmlns:xlink // check higher up for xmlns:prefix // check the current node and if necessary, check for the next matching local name up in the hierarchy (until reaching the do...
...cument root) while (thisitem.
nodename !== '#document' && thisitem.
nodename !== '#document-fragment') { attrs2 = thisitem.attributes; for (var i = 0; i < attrs2.length; i++) { // search for any prefixed xmlns declaration on thisitem which match prefixes found above with desired local name if (attrs2[i].
nodename.match(xmlnsprefix) && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w3.org/1999/xlink' return attrs[j].nodevalue; } } thisitem = thisitem.parentnode; } } } return ''; // if not found (some implementations return 'null' but this is not standard) } alert(getattributenswrapper (someelement, 'http://www.
Writing JavaScript for XHTML - Archive of obsolete content
problem: names in xhtml and html are represented in different cases scripts that used getelementsbytagname() with an upper case html name no longer work, and attributes like
nodename or tagname return upper case in html and lower case in xhtml.
...for name comparisons, first convert to lower case before doing the comparison (e.g., "el.
nodename.tolowercase() === 'html'").
DocumentOrShadowRoot.fullscreenElement - Web APIs
example this example presents a function, isvideoinfullscreen(), which looks at the value returned by fullscreenelement; if the document is in full-screen mode (fullscreenelement isn't null) and the full-screen element's
nodename is video, indicating a <video> element, the function returns true, indicating that the video is in full-screen mode.
... function isvideoinfullscreen() { if (document.fullscreenelement && document.fullscreenelement.
nodename == 'video') { return true; } return false; } specifications specification status comment fullscreen apithe definition of 'document.fullscreenelement' in that specification.
Element.getAttributeNodeNS() - Web APIs
syntax attributenode = element.getattributenodens(namespace,
nodename) attributenode is the node for specified attribute.
...
nodename is a string specifying the name of the attribute.
Element.outerHTML - Web APIs
console.log(d.outerhtml); // the string '<div id="d"><p>content</p><p>further elaborated</p></div>' // is written to the console window replacing a node by setting the outerhtml property: html <div id="container"> <div id="d">this is a div.</div> </div> javascript var container = document.getelementbyid("container"); var d = document.getelementbyid("d"); console.log(container.firstchild.
nodename); // logs "div" d.outerhtml = "<p>this paragraph replaced the original div.</p>"; console.log(container.firstchild.
nodename); // logs "p" // the #d div is no longer part of the document tree, // the new paragraph replaced it.
...for example: var div = document.createelement("div"); div.outerhtml = "<div class=\"test\">test</div>"; console.log(div.outerhtml); // output: "<div></div>" also, while the element will be replaced in the document, the variable whose outerhtml property was set will still hold a reference to the original element: var p = document.getelementsbytagname("p")[0]; console.log(p.
nodename); // shows: "p" p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.
nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.org?a=b&c=d"; console.log(anc.outerhtml); // output: "<a href='https://developer.mozilla.org?a=b&c=d'></a>" specification specificat...
Index - Web APIs
2723 node.
nodename api, dom, gecko, needsspectable, node, property, read-only the
nodename read-only property returns the name of the current node as a string.
...its
nodename is the notation name.
Node.firstChild - Web APIs
<p id="para-01"> <span>first span</span> </p> <script> var p01 = document.getelementbyid('para-01'); console.log(p01.firstchild.
nodename); </script> in the above, the console will show '#text' because a text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags.
... <p id="para-01"><span>first span</span></p> <script> var p01 = document.getelementbyid('para-01'); console.log(p01.firstchild.
nodename); </script> now the console will show 'span'.
Node.getRootNode() - Web APIs
master/dom/node/getrootnode()/demo/getrootnode.html --> <div class="js-parent"> <div class="js-child"></div> </div> <div class="js-shadowhost"></div> <script> // works on chrome 54+，opera 41+ var parent = document.queryselector('.js-parent'), child = document.queryselector('.js-child'), shadowhost = document.queryselector('.js-shadowhost'); console.log(parent.getrootnode().
nodename); // #document console.log(child.getrootnode().
nodename); // #document // create a shadowroot var shadowroot = shadowhost.attachshadow({mode:'open'}); shadowroot.innerhtml = '<style>div{background:#2bb8aa;}</style>' + '<div class="js-shadowchild">content</div>'; var shadowchild = shadowroot.queryselector('.js-shadowchild'); // the default value of composed is false console.l...
...og(shadowchild.getrootnode() === shadowroot); // true console.log(shadowchild.getrootnode({composed:false}) === shadowroot); // true console.log(shadowchild.getrootnode({composed:true}).
nodename); // #document </script> specifications specification status comment domthe definition of 'getrootnode()' in that specification.
Using XMLHttpRequest - Web APIs
plainescape : escape; for (var nitem = 0; nitem < otarget.elements.length; nitem++) { ofield = otarget.elements[nitem]; if (!ofield.hasattribute("name")) { continue; } sfieldtype = ofield.
nodename.touppercase() === "input" ?
... if (oformelement.method.tolowercase() === "post") { oreq.open("post", oformelement.action); oreq.send(new formdata(oformelement)); } else { var ofield, sfieldtype, nfile, ssearch = ""; for (var nitem = 0; nitem < oformelement.elements.length; nitem++) { ofield = oformelement.elements[nitem]; if (!ofield.hasattribute("name")) { continue; } sfieldtype = ofield.
nodename.touppercase() === "input" ?
Parsing and serializing XML - Developer guides
parsing strings into dom trees this example converts an xml fragment in a string into a dom tree using a domparser: var smystring = '<a id="a"><b id="b">hey!</b></a>'; var oparser = new domparser(); var odom = oparser.parsefromstring(smystring, "application/xml"); // print the name of the root element or error message console.log(odom.documentelement.
nodename == "parsererror" ?
... "error while parsing" : odom.documentelement.
nodename); parsing url-addressable resources into dom trees using xmlhttprequest here is sample code that reads and parses a url-addressable xml file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.responsexml.documentelement.
nodename); } xhr.onerror = function() { dump("error while getting xml."); } xhr.open("get", "example.xml"); xhr.responsetype = "document"; xhr.send(); the value returned in the xhr object's responsexml field is a document constructed by parsing the xml.
XPath snippets - XPath
example: defining a simple docevaluatearray() utility function // example usage: // var els = docevaluatearray('//a'); // alert(els[0].
nodename); // gives 'a' in html document with at least one link function docevaluatearray (expr, doc, context, resolver) { var i, result, a = []; doc = doc || (context ?
... example: defining a getxpathforelement() utility function function getxpathforelement(el, xml) { var xpath = ''; var pos, tempitem2; while(el !== xml.documentelement) { pos = 0; tempitem2 = el; while(tempitem2) { if (tempitem2.nodetype === 1 && tempitem2.
nodename === el.
nodename) { // if it is element_node of the same name pos += 1; } tempitem2 = tempitem2.previoussibling; } xpath = "*[name()='"+el.
nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']["+pos+']'+'/'+xpath; el = el.parentnode; } xpath = '/*'+"[name()='"+xml.documentelement.
nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.nam...
Reddit Example - Archive of obsolete content
if (t.
nodename != "a") return; // don't intercept the click if it was on one of the links in the header // or next/previous footer, since those links should load in the panel itself.
panel - Archive of obsolete content
var myscript = "window.addeventlistener('click', function(event) {" + " var t = event.target;" + " if (t.
nodename == 'a')" + " self.port.emit('click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("click-link", function(url) { console.log(url); }); mypanel.show(); this example uses contentscript to supply the script as a string.
HTML to DOM - Archive of obsolete content
let's take a look at the donkeyfire.donkeybrowser_onpageload() handler: donkeybrowser_onpageload: function(aevent) { var doc = aevent.originaltarget; var url = doc.location.href; if (aevent.originaltarget.
nodename == "#document") { // ok, it's a real page, let's do our magic dump("[df] url = "+url+"\n"); var text = doc.evaluate("/html/body/h1",doc,null,xpathresult.string_type,null).stringvalue; dump("[df] text in /html/body/h1 = "+text+"\n"); } }, as you can see, we obtain full access to the dom of the page we loaded in background, and we can even evaluate xpath expressions.
Tabbox - Archive of obsolete content
handling onclosetab event assuming the tabbox, tabs, and tabpanels widgets with id's the same as their
nodename, this function will correctly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work ar...
xml:base support in old browsers - Archive of obsolete content
// var ns = 'http://www.w3.org/xml/1998/namespace'; var att, protocolpos; var xmlbase = ''; var abs = false; // avoid loop if node is not present if (!thisitem || !thisitem.
nodename) { return xmlbase; } // check present element and higher up for xml:base // now check for the next matching local name up in the hierarchy (until the document root) while (thisitem.
nodename !== '#document' && thisitem.
nodename !== '#document-fragment') { att = thisitem.getattribute('xml:base'); // xml: namespaces must use 'xml' prefix if (att) { protocolpos = att.indexof('//'); v...
jspage - Archive of obsolete content
dom()*(a-b+1)+b);}function $splat(b){var a=$type(b); return(a)?((a!="array"&&a!="arguments")?[b]:b):[];}var $time=date.now||function(){return +new date;};function $try(){for(var b=0,a=arguments.length;b<a; b++){try{return arguments[b]();}catch(c){}}return null;}function $type(a){if(a==undefined){return false;}if(a.$family){return(a.$family.name=="number"&&!isfinite(a))?false:a.$family.name; }if(a.
nodename){switch(a.nodetype){case 1:return"element";case 3:return(/\s/).test(a.nodevalue)?"textnode":"whitespace";}}else{if(typeof a.length=="number"){if(a.callee){return"arguments"; }else{if(a.item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.
onchange - Archive of obsolete content
ct example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.
nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> ...
Property - Archive of obsolete content
ent.childnodes dom:element.children dom:element.clientheight dom:element.clientleft dom:element.clienttop dom:element.clientwidth dom:element.clonenode dom:element.firstchild dom:element.firstelementchild dom:element.lastchild dom:element.lastelementchild dom:element.localname dom:element.namespaceuri dom:element.nextelementsibling dom:element.nextsibling dom:element.
nodename dom:element.nodetype dom:element.nodevalue dom:element.ownerdocument dom:element.parentnode dom:element.prefix dom:element.previouselementsibling dom:element.previoussibling dom:element.scrollheight dom:element.scrollleft dom:element.scrolltop dom:element.scrollwidth dom:element.tagname dom:element.textcontent ...
textbox (Toolkit autocomplete) - Archive of obsolete content
ct example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.
nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> oninput type: script code this event is sent when a user enters text in a textbox.
Textbox (XPFE autocomplete) - Archive of obsolete content
ct example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.
nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> onerrorcommand type: script code this event handler is called when an error occurs when selecting a result from the popup.
colorpicker - Archive of obsolete content
ct example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.
nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference.
preference - Archive of obsolete content
ct example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.
nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element.
Gecko info for Windows accessibility vendors
hresult get_nodeinfo( /* [out] */ bstr *
nodename, // for elements, this is the tag name /* [out] */ short *namespaceid, /* [out] */ bstr *nodevalue, /* [out] */ unsigned int *numchildren, /* [out] */ unsigned int *uniqueid, // see description of unique id's in above section on events /* [out] */ unsigned short *nodetype); the get_attributes method returns the set of attribute, val...
Document.createNodeIterator() - Web APIs
example const nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode(node) { return node.
nodename.tolowercase() === 'p' ?
Document.getElementsByClassName() - Web APIs
here we'll find all div elements that have a class of 'test': var testelements = document.getelementsbyclassname('test'); var testdivs = array.prototype.filter.call(testelements, function(testelement){ return testelement.
nodename === 'div'; }); get the first element whose class is 'test' this is the most commonly used method of operation.
Element.getElementsByClassName() - Web APIs
here we'll find all <div> elements that have a class of test: var testelements = document.getelementsbyclassname('test'); var testdivs = array.prototype.filter.call(testelements, function(testelement) { return testelement.
nodename === 'div'; }); specifications specification status comment domthe definition of 'element.getelementsbyclassname()' in that specification.
Element.name - Web APIs
note: the name property doesn't exist for other elements; unlike tagname and
nodename, it is not a property of the node, element or htmlelement interfaces.
Element.shadowRoot - Web APIs
from here we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the css found inside it: function updatestyle(elem) { const shadow = elem.shadowroot; const childnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.
nodename === 'style') { childnode.textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-color: ${elem.getattribute('c')}; } `; } }); } specifications specification status comment domthe definition of 'shadowroot' in that specification.
Element.tagName - Web APIs
for element objects, the value of tagname is the same as the value of the
nodename property the element object inherits from node.
Event.explicitOriginalTarget - Web APIs
function mycommand(ev) { alert(ev.explicitoriginaltarget.
nodename); // returns 'menuitem' } <xul:command id="my-cmd-anaction" oncommand="mycommand(event);"/> <xul:menulist> <xul:menupopup> <xul:menuitem label="get my element name!" command="my-cmd-anaction"/> </xul:menupopup> </menulist> specifications this is a mozilla-specific property.
GlobalEventHandlers.onkeypress - Web APIs
*/ (function () { const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt || window.event, nchr = oevent.charcode, snodetype = oevent.target.
nodename.touppercase(); if (nchr === 0 || oevent.target.contenteditable.touppercase() === "true" || snodetype === "textarea" || snodetype === "input" && oevent.target.type.touppercase() === "text") { return true; } if (nchr !== ssecret.charcodeat(noffset)) { noffset = nchr === ssecret.charcodeat(0) ?
HTMLFormElement.elements - Web APIs
var inputs = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { if (inputs[i].
nodename === "input" && inputs[i].type === "text") { // update text input inputs[i].value.tolocaleuppercase(); } } disabling form controls var inputs = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { // disable all form controls inputs[i].setattribute("disabled", ""); } specifications specification status...
Node.childNodes - Web APIs
(for example, to get the name of the first childnode: elementnodereference.childnodes[1].
nodename.) the document object itself has 2 children: the doctype declaration and the root element, typically referred to as documentelement.
Node.nextSibling - Web APIs
', el.
nodename); el = el.nextsibling; i++; } console.groupend(); </script> /************************************************** the console displays the following: siblings of div-1 1.
Node - Web APIs
node.
nodenameread only returns a domstring containing the name of the node.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
syntax var nextnode = elementnodereference.nextelementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <script type="text/javascript"> var el = document.getelementbyid('div-01').nextelementsibling; console.log('siblings of div-01:'); while (el) { console.log(el.
nodename); el = el.nextelementsibling; } </script> this example outputs the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("nextelement...
NonDocumentTypeChildNode.previousElementSibling - Web APIs
ereference.previouselementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el = document.getelementbyid('div-03').previouselementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.
nodename + '</li>'); el = el.previouselementsibling; } document.write('</ol>'); </script> this example outputs the following into the page when it loads: siblings of div-03 1.
Range.setStart() - Web APIs
main st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.
nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e.
ShadowRoot - Web APIs
from here we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the css found inside it: function updatestyle(elem) { var shadow = elem.shadowroot; var childnodes = shadow.childnodes; for(var i = 0; i < childnodes.length; i++) { if(childnodes[i].
nodename === 'style') { childnodes[i].textcontent = 'div {' + 'width: ' + elem.getattribute('l') + 'px;' + 'height: ' + elem.getattribute('l') + 'px;' + 'background-color: ' + elem.getattribute('c') + ';' + '}'; } } } specifications specification status comment domthe definition of 'interface shadowroot' in that specif...
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
{ try { matcheditems = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.
nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors.