Webを学ぶ console、tagによる要素の取得、スタイルの設定、変更、イベントハンドラー

ハンズオンJavaScript
楽天ブックス
Yahoo!
au PAY マーケット
開発環境
ハンズオンJavaScript (あんどうやすし(著)、オライリー・ジャパン)の12章(Webを学ぶ)、12.8(練習問題)の12-1、12-2、12-3の解答を求めてみる。
コード
imgs = document.querySelectorAll('img')
NodeList(4) [img.gb_Da.gbii, img.gb_Ia.gbip.gb_fb, img.gb_Zb.gb_fb, img.lnXdpd]0: img.gb_Da.gbii1: img.gb_Ia.gbip.gb_fb2: img.gb_Zb.gb_fb3: img.lnXdpdaccessKey: ""align: ""alt: "Google"ariaAtomic: nullariaAutoComplete: nullariaBusy: nullariaChecked: nullariaColCount: nullariaColIndex: nullariaColSpan: nullariaCurrent: nullariaDescription: nullariaDisabled: nullariaExpanded: nullariaHasPopup: nullariaHidden: nullariaKeyShortcuts: nullariaLabel: nullariaLevel: nullariaLive: nullariaModal: nullariaMultiLine: nullariaMultiSelectable: nullariaOrientation: nullariaPlaceholder: nullariaPosInSet: nullariaPressed: nullariaReadOnly: nullariaRelevant: nullariaRequired: nullariaRoleDescription: nullariaRowCount: nullariaRowIndex: nullariaRowSpan: nullariaSelected: nullariaSetSize: nullariaSort: nullariaValueMax: nullariaValueMin: nullariaValueNow: nullariaValueText: nullassignedSlot: nullattributeStyleMap: StylePropertyMap {size: 0}attributes: NamedNodeMap {0: class, 1: alt, 2: height, 3: src, 4: srcset, 5: width, 6: data-iml, 7: data-atf, class: class, alt: alt, height: height, src: src, srcset: srcset, …}autocapitalize: ""autofocus: falsebaseURI: "https://www.google.com/"border: ""childElementCount: 0childNodes: NodeList []children: HTMLCollection []classList: DOMTokenList ["lnXdpd", value: "lnXdpd"]className: "lnXdpd"clientHeight: 92clientLeft: 0clientTop: 0clientWidth: 272complete: truecontentEditable: "inherit"crossOrigin: nullcurrentSrc: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"dataset: DOMStringMap {iml: "1614591435965", atf: "1"}decoding: "auto"dir: ""draggable: trueelementTiming: ""enterKeyHint: ""firstChild: nullfirstElementChild: nullheight: 92hidden: falsehspace: 0id: ""innerHTML: ""innerText: ""inputMode: ""isConnected: trueisContentEditable: falseisMap: falselang: ""lastChild: nulllastElementChild: nullloading: "auto"localName: "img"longDesc: ""lowsrc: ""name: ""namespaceURI: "http://www.w3.org/1999/xhtml"naturalHeight: 92naturalWidth: 272nextElementSibling: nullnextSibling: nullnodeName: "IMG"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 92offsetLeft: 433offsetParent: bodyoffsetTop: 258offsetWidth: 272onabort: nullonanimationend: nullonanimationiteration: nullonanimationstart: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonbeforexrselect: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullonformdata: nullonfullscreenchange: nullonfullscreenerror: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerrawupdate: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectionchange: nullonselectstart: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullontransitioncancel: nullontransitionend: nullontransitionrun: nullontransitionstart: nullonvolumechange: nullonwaiting: nullonwebkitanimationend: nullonwebkitanimationiteration: nullonwebkitanimationstart: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwebkittransitionend: nullonwheel: nullouterHTML: "<img class="lnXdpd" alt="Google" height="92" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" srcset="/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png 1x, /images/branding/googlelogo/2x/googlelogo_color_272x92dp.png 2x" width="272" data-iml="1614591435965" data-atf="1">"outerText: ""ownerDocument: documentparentElement: div.k1zIA.rSk4separentNode: div.k1zIA.rSk4separt: DOMTokenList [value: ""]prefix: nullpreviousElementSibling: stylepreviousSibling: stylereferrerPolicy: ""scrollHeight: 92scrollLeft: 0scrollTop: 0scrollWidth: 272shadowRoot: nullsizes: ""slot: ""spellcheck: truesrc: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"srcset: "/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png 1x, /images/branding/googlelogo/2x/googlelogo_color_272x92dp.png 2x"style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}tabIndex: -1tagName: "IMG"textContent: ""title: ""translate: trueuseMap: ""vspace: 0width: 272x: 432y: 258__jsaction: {}__proto__: HTMLImageElement(...)length: 4__proto__: NodeList
logo = imags[3]
VM1121:1 Uncaught ReferenceError: imags is not defined
    at <anonymous>:1:1
(anonymous) @ VM1121:1
logo = imgs[3]
<img class="lnXdpd" alt="Google" height="92" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" srcset="/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png 1x, /images/branding/googlelogo/2x/googlelogo_color_272x92dp.png 2x" width="272" data-iml="1614591435965" data-atf="1" style="border: 1px solid black;">
logo.style.border="1px solid black"
"1px solid black"
css = document.styleSheets[0]
CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: "text/css", href: null, …}
css.insertRule(".lnXdpd: {2px solid red}");
VM1642:1 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.lnXdpd: {2px solid red}'.
    at <anonymous>:1:5
(anonymous) @ VM1642:1
css.insertRule(".lnXdpd {border:2px solid red}");

0
log.style.border='';
VM1743:1 Uncaught ReferenceError: log is not defined
    at <anonymous>:1:1
(anonymous) @ VM1743:1
logo.style.border = '';
""
div = document.createElement('div');
<div></div>
div.className='dot'
"dot"
css.insertRule(`
.dot {
position: absolute;
width: 5px;
height: 5px;
background-color: black;
}`);
0
drag = false;
false
document.body.onmousedown = (e) => drag = true;
(e) => drag = true
document.body.onmouseup = (e) => drag = false;
(e) => drag = false
document.body.onmousemove = (e) => {
    if (drag && e.shiftKey) {
        let div = document.createElement('div');
        div.className = 'dot';
        div.style.left = `${e.clientX}px`;
        div.style.top = `${e.clientY}px`;
        document.body.append(div);
    };
}
(e) => {
    if (drag && e.shiftKey) {
        let div = document.createElement('div');
        div.className = 'dot';
        div.style.left = `${e.clientX}px`;
        div.style.top = `${e.clientY}…