Xah Web Dev Blog Archive 2016-01
Closure (minor update)
Web Design of Popular Sites: Serif or Sans Serif, Fixed Layout or Flow?
best way to JS: Get Current Script Element
Clone, Deep Copy Object/Array. new tip.
DOM, List Attributes
in DOM, there's a strange attributes
property, which return a list of attributes of a element.
use it like this
var hh = document.getElementsByTagName("a")[0]; var aa = hh.attributes; // number of attributes aa.length // first attribute aa[0]
result object can be indexed by number
(e.g. result[2]
)
or attribute name
(e.g. result["src"]
).
https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
the returned object is a strange
NamedNodeMap
object.
https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
each element of NamedNodeMap
is a strange
Attr
object.
This Attr
object went thru major DOM changes.
https://developer.mozilla.org/en-US/docs/Web/API/Attr
I think if you really want a list of all attributes of a node, then there is no other way, use
node.attributes
.
But otherwise, you can use
node.hasAttribute(attr)
node.getAttribute(attr)
node.setAttribute(attr, val)
by the way, i said they are strange, because they are strange to me, and probably rarely used. I need to read the DOM spec. Now with whatwg's spec, it should be much easier to read.
[see JS: DOM Methods]
Disable Google Chrome Smooth Scrolling
latest Google Chrome v49 now has smooth scrolling. to disable it, goto chrome://flags/#disable-smooth-scrolling
JavaScript “undefined” trap
// JavaScript trap var u = "2"; var o = {}; o[u.id] = 4; console.log ( o[u.id]); // works!!
lesson: JavaScript returns undefined
in many situations, with no warning. (var with no init, non-existent property, out of bound array access, function with no return value, etc.) [see undefined]
so, here, the u.id
implicitly becomes "undefined"
, and now you basically have o = {"undefined":4};
see also Property Key
WebSocket is now mature, supported by all browsers.
Buy JavaScript in Depth. New version is out.
update sent to previous buyers. If you changed your email, let me know. email to xah@xahlee.org
Visual CSS. Now, there's side panel for easy navigation, for all pages.
JavaScript in Depth. Now each page has a side-panel, for easy navigation.
ECMAScript 2015 Set Object's Parent
DOM: Live Object (major update)
Event Delegation (updated. new code example, functional programing style)
JS: Add/Remove Event Handler (updated)
Regex Functions.
Major update. Examples are on a page of their own.
the one html tag that summarize just how fk'd the web standards and fashions in past decade is: iframe