{"id":6954,"date":"2022-09-26T22:54:21","date_gmt":"2022-09-26T13:54:21","guid":{"rendered":"https:\/\/www.sria.co.jp\/blog\/?p=6954"},"modified":"2022-10-21T23:06:10","modified_gmt":"2022-10-21T14:06:10","slug":"6954","status":"publish","type":"post","link":"https:\/\/www.sria.co.jp\/blog\/2022\/09\/6954\/","title":{"rendered":"MutationObserver\u3067HTML\u8981\u7d20\u306b\u52a0\u3048\u3089\u308c\u305f\u5909\u66f4\u3092\u5143\u306b\u623b\u3059\u3010JavaScript\u3011"},"content":{"rendered":"
HTML\u8981\u7d20\u306e\u4e2d\u8eab\u306e\u5909\u5316\u3092\u76e3\u8996\u3057\u3066\u3001\u5909\u5316\u304c\u3042\u3063\u305f\u5834\u5408\u306b\u5143\u306e\u5185\u5bb9\u306b\u623b\u3059\u3088\u3046\u66f8\u304d\u63db<\/span>\u3048\u308b\u65b9\u6cd5\u3092\u5fd8\u5099\u9332\u3068\u3057\u3066\u6b8b\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/span><\/div>\n
\u4ed5\u639b\u3051\u3068\u3057\u3066\u306f\u3001<\/span><\/div>\n
\n
1. HTML\u8981\u7d20\u3092\u751f\u6210<\/span><\/div>\n
2. MutationObserver\u306b\u3088\u308a1\u3067\u4f5c\u3063\u305f\u8981\u7d20\u3092\u76e3\u8996<\/span><\/div>\n
3. \u4f55\u304b\u3057\u3089\u306e\u539f\u56e0\u30671\u306b\u5909\u66f4\u304c\u3042\u3063\u305f\u5834\u5408\u30012\u306e\u751f\u6210\u6642\u306b\u8a2d\u5b9a\u3057\u305f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u304c\u547c\u3073\u51fa\u3055\u308c\u308b\u3002<\/span><\/div>\n
4. 1\u306e\u6642\u70b9\u306e\u8981\u7d20\u306b\u306a\u308b\u3088\u3046\u4e2d\u8eab\u3092\u66f8\u304d\u63db\u3048\u308b<\/span><\/div>\n<\/div>\n
\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002<\/span><\/div>\n
\n

\u30c7\u30e2\u30b3\u30fc\u30c9\u3092\u4f7f\u3063\u3066\u8a73\u3057\u304f\u305d\u306e\u4ed5\u7d44\u307f\u306b\u3064\u3044\u3066\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/span><\/p>\n

 <\/p>\n<\/div>\n

\n
\n

\n\u30c7\u30e2\u3067\u306f\u8981\u7d20\u306e\u5c5e\u6027\u3092\u76e3\u8996\u3057\u3001\u305d\u306e\u5c5e\u6027\u306b\u5909\u66f4\u304c\u52a0\u3048\u3089\u308c\u305f\u3068\u304d\u306b\u5143\u306b\u623b\u3059\u6d41\u308c\u3092\u793a\u3057\u3066\u3044\u304d\u307e\u3059\u3002
\n7\u884c\u76ee\u306b\u81ea\u5206\u304c\u7528\u610f\u3057\u305fHTML\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002
\n<\/span><\/div>\n<\/div>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n<\/head>\n<body>\n    <h1 id=\"hello\" style=\"color: red;\">Hello<\/h1>\n\n    <script>\n        document.getElementById(\"hello\").style = \"color: green;\";\n    <\/script>\n    \n<\/body>\n<\/html><\/pre>\n
\n
\u3000\u3057\u304b\u305710\u884c\u76ee\u3067\u4f55\u304b\u3057\u3089\u306e\u8981\u56e0\u306b\u3088\u308astyle\u5c5e\u6027\u304c\u66f8\u304d\u63db\u3048\u3089\u308c\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002<\/span><\/div>\n<\/div>\n
\"\"<\/a><\/div>\n
 <\/p>\n
\n
\u3000\u305d\u3053\u3067style\u5c5e\u6027\u306b\u5909\u66f4\u3092\u76e3\u8996\u3059\u308bMutationObserver\u306b\u5143\u306e\u4e2d\u8eab\u3092\u5fa9\u5143\u3059\u308b\u3088\u3046\u306bHTML\u3092\u66f8\u304d\u76f4\u3059\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u3042\u305f\u304b\u3082\u5909\u66f4\u304c\u7121\u304b\u3063\u305f\u304b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/span>11\u884c\u76ee\u306e\u30b3\u30fc\u30c9\u304c\u306a\u3044\u3068\u3001MutationObserver\u306b\u8a2d\u5b9a\u3057\u305f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u4e2d\u8eab\u306e12\u884c\u76ee\u306e\u30b3\u30fc\u30c9\u306e\u5b9f\u884c\u304c\u518d\u3073MutationObserver\u306b\u8a2d\u5b9a\u3057\u305f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u547c\u3073\u51fa\u3057\u3066\u3057\u307e\u3046\u306e\u3067\u7121\u9650\u30eb\u30fc\u30d7\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/span><\/div>\n<\/div>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n<\/head>\n<body>\n    <h1 id=\"hello\" style=\"color: red;\">Hello<\/h1>\n\n    <script>\n        let observer = new MutationObserver(() => {\n            observer.disconnect();\n            document.getElementById(\"hello\").style = \"color: red;\";\n        });\n        observer.observe(document.getElementById(\"hello\"), {\n            attributes: true,\n            attributeFilter: [\"style\"]\n        });\n    <\/script>\n\n    <script>\n        document.getElementById(\"hello\").style = \"color: green;\";\n    <\/script>\n\n<\/body>\n<\/html><\/pre>\n
 <\/p>\n
\"\"<\/a><\/p>\n
\n
\u3000\u305f\u3060\u3057\u3053\u308c\u3060\u3068\u4e0d\u5341\u5206\u306a\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/span><\/div>\n
\u3000\u5909\u66f4\u304c1\u56de\u3060\u3051\u306a\u3089\u3053\u308c\u3067\u3088\u3044\u306e\u3067\u3059\u304c\u3001\u8907\u6570\u56de\u306e\u5909\u66f4 (21\u300125\u884c\u76ee) \u304c\u4e88\u671f\u3055\u308c\u308b\u5834\u5408\u306f11\u884c\u76ee\u306e\u30b3\u30fc\u30c9\u304c\u30cd\u30c3\u30af\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u308c\u306f\u6700\u521d\u306e\u5909\u66f4\u304c\u691c\u77e5\u3055\u308c\u305f\u3068\u304d\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u76e3\u8996\u3092\u505c\u6b62\u3059\u308b\u304b\u3089\u3067\u3059\u3002<\/span><\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n<\/head>\n<body>\n    <h1 id=\"hello\" style=\"color: red;\">Hello<\/h1>\n\n    <script>\n        let observer = new MutationObserver(() => {\n            observer.disconnect();\n            document.getElementById(\"hello\").style = \"color: red;\";\n        });\n        observer.observe(document.getElementById(\"hello\"), {\n            attributes: true,\n            attributeFilter: [\"style\"]\n        });\n    <\/script>\n\n    <script>\n        document.getElementById(\"hello\").style = \"color: green;\";\n    <\/script>\n\n    <script>\n        document.getElementById(\"hello\").style = \"color: green;\";\n    <\/script>\n    \n<\/body>\n<\/html><\/pre>\n
\"\"<\/a><\/p>\n
 <\/p>\n
\u3000\u3053\u306e\u554f\u984c\u306f\u30b3\u30fc\u30c9\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fee\u6b63\u3059\u308b\u3053\u3068\u3067\u5bfe\u51e6\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3064\u307e\u308a\u3001<\/p>\n
 <\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n<\/head>\n<body>\n    <h1 id=\"hello\" style=\"color: red;\">Hello<\/h1>\n\n    <script>\n        let observer = new MutationObserver(() => {\n            if(document.getElementById(\"hello\").getAttribute(\"style\") !== \"color: red;\"){\n                document.getElementById(\"hello\").style = \"color: red;\";\n            }\n        });\n        observer.observe(document.getElementById(\"hello\"), {\n            attributes: true,\n            attributeFilter: [\"style\"]\n        });\n    <\/script>\n\n    <script>\n        document.getElementById(\"hello\").style = \"color: green;\";\n    <\/script>\n\n    <script>\n        document.getElementById(\"hello\").style = \"color: green;\";\n    <\/script>\n    \n<\/body>\n<\/html><\/pre>\n
\u3000\u3068\u3044\u3046\u3088\u3046\u306bstyle\u5c5e\u6027\u304c\u6240\u671b\u306e\u5f62\u4ee5\u5916\u306b\u5909\u5316\u3057\u305f\u3068\u304d\u306e\u307fstyle\u5c5e\u6027\u3092\u5909\u66f4\u3055\u305b\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u8907\u6570\u56de\u306estyle\u5c5e\u6027\u306e\u5909\u5316\u306b\u3082\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002<\/p>\n
 <\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
\n
\u4ee5\u4e0a\u5909\u66f4\u3092\u76e3\u8996\u3059\u308bMutationObserver\u3092\u4f7f\u3063\u3066HTML\u8981\u7d20\u306b\u52a0\u3048\u3089\u308c\u305f\u5909\u66f4\u3092\u5143\u306b\u623b\u3059\u65b9\u6cd5\u3067\u3057\u305f\u3002<\/p>\n
\u7528\u9014\u3068\u3057\u3066\u306f\u3001\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u7ba1\u7406\u3055\u308c\u3066\u3044\u308b\u8981\u7d20\u306e\u4e2d\u8eab\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u308a\u3001<\/p>\n
Stylus\u306a\u3069\u3067css\u306e\u66f8\u304d\u63db\u3048\u3092\u53cd\u6620\u3055\u305b\u306a\u3044\u3088\u3046\u306b\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
HTML\u8981\u7d20\u306e\u4e2d\u8eab\u306e\u5909\u5316\u3092\u76e3\u8996\u3057\u3066\u3001\u5909\u5316\u304c\u3042\u3063\u305f\u5834\u5408\u306b\u5143\u306e\u5185\u5bb9\u306b\u623b\u3059\u3088\u3046\u66f8\u304d\u63db\u3048\u308b\u65b9\u6cd5\u3092\u5fd8\u5099\u9332\u3068\u3057\u3066\u6b8b\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4ed5\u639b\u3051\u3068\u3057\u3066\u306f\u3001 1. HTML\u8981\u7d20\u3092\u751f\u6210 2. MutationObserver\u306b\u3088\u308a1\u3067\u4f5c\u3063\u305f\u8981\u7d20…<\/p>\n","protected":false},"author":26,"featured_media":2879,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14,8],"tags":[],"_links":{"self":[{"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts\/6954"}],"collection":[{"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/comments?post=6954"}],"version-history":[{"count":32,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts\/6954\/revisions"}],"predecessor-version":[{"id":7003,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/posts\/6954\/revisions\/7003"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/media\/2879"}],"wp:attachment":[{"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/media?parent=6954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/categories?post=6954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sria.co.jp\/blog\/wp-json\/wp\/v2\/tags?post=6954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}