{"id":4075,"date":"2012-10-30T01:48:37","date_gmt":"2012-10-29T16:48:37","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=4075"},"modified":"2020-03-20T18:01:35","modified_gmt":"2020-03-20T09:01:35","slug":"javascript-class%e5%8f%96%e5%be%97-getelementbyclassname%e3%81%a8queryselector","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=4075","title":{"rendered":"JavaScript class\u53d6\u5f97 getElementByClassName\u3068querySelector"},"content":{"rendered":"<p>\u6700\u8fd1\u3001\u5916\u306f\u3081\u3063\u304d\u308a\u808c\u5bd2\u304f\u306a\u308a\u3001\u3082\u3046\u51ac\u306e\u6c17\u914d\u3055\u3048\u3082\u611f\u3058\u59cb\u3081\u308b\u4eca\u65e5\u3053\u306e\u9803\u306b\u306a\u3063\u3066\u304d\u307e\u3057\u305f\u306d\u3002<\/p>\n<p>\u7686\u3055\u3093\u306f\u3069\u306e\u69d8\u306bclass\u3092\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u304b\uff1f<\/p>\n<p>\u3048\uff1f\u53d6\u5f97\u3057\u306a\u3044\uff1f<\/p>\n<p>\u305d\u3093\u306a\u53d6\u5f97\u3057\u306a\u3044\u65b9\u3005\u306b\u3082\u7c21\u5358\u306b\u53d6\u5f97\u51fa\u6765\u308b\u4e16\u306e\u4e2d\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>\u4eca\u56de\u306fgetElementByClassName\u3068querySelector\u3067\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">var element = document.getElementById(\"hoge\");\r\nelement.getAttribute(\"class\");<\/pre>\n<p>\u3068\u304b\u3001<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">var element = document.getElementById('hoge');\r\nelement.className\u00a0= \"hogege\";<\/pre>\n<p>\u3068\u304b\u3067\u53d6\u5f97\u3084\u5909\u66f4\u3092\u884c\u3063\u3066\u304d\u307e\u3057\u305f\u304c\u3001HTML5\u306e\u4ed5\u69d8\u306b\u3088\u308a\u3001<\/p>\n<p>getElementById\u306e\u69d8\u306b\u00a0getElementsByClassName\u3067\u53d6\u5f97\u51fa\u6765\u307e\u3059\u3002<\/p>\n<p>\u3082\u3061\u308d\u3093\u53e4\u3044\u30d6\u30e9\u30a6\u30b6\u306f\u5bfe\u5fdc\u3057\u3066\u304a\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u4fbf\u5229\u306b\u306a\u308a\u307e\u3057\u305f\u306d\u30fc\u3002<\/p>\n<h4>getElementsByClassName<\/h4>\n<p>\u4f8b\uff1a<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">var elements = document.getElementsByClassName('hoge');<\/pre>\n<p>\u66f4\u306b\u4fbf\u5229\u306a\u306e\u304c<strong>querySelector<\/strong>\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<h4><strong>querySelector<\/strong><\/h4>\n<p><strong>querySelector<\/strong>\u306fCSS\u306e\u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u3046\u3088\u3046\u306b\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>jQuery\u306e$(&#8216;.hoge&#8217;);\u3068\u540c\u69d8\u306e\u4f7f\u7528\u65b9\u6cd5\u3067\u3059\u3002<\/p>\n<p><strong>\u4f8b\uff1a<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">var elements = document.querySelectorAll('hoge');<\/pre>\n<p><strong>\u4f8b\uff1a<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">var elements = document.querySelectorAll\u00a0('.hoge &gt; li');<\/pre>\n<p>\u3053\u306e<strong>querySelectorAll<\/strong>\u306f<strong>getElementsByClassName<\/strong>\u3067\u53d6\u5f97\u3059\u308b\u3088\u308a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u826f\u3044\u305d\u3046\u3067\u3059\u3002<\/p>\n<p>\u307e\u305f\u3001\u30af\u30e9\u30b9\u304c\u4e00\u3064\u3057\u304b\u5b58\u5728\u3057\u306a\u3044\u5834\u5408\u306f<strong>querySelector<\/strong>\u3067\u53d6\u5f97\u3059\u308b\u307b\u3046\u304c\u3088\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>\u4f8b\uff1a<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">var elements = document.querySelector('.hoge');<\/pre>\n<p><strong>querySelectorAll<\/strong>\u3067\u53d6\u5f97\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u914d\u5217\u3067\u683c\u7d0d\u3055\u308c\u307e\u3059\u306e\u3067\u3001<\/p>\n<p>elements[0].classList.add(&#8216;hogege&#8217;);<\/p>\n<p>\u306a\u3069\u3067\u6307\u5b9a\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u3001\u5916\u306f\u3081\u3063\u304d\u308a\u808c\u5bd2\u304f\u306a\u308a\u3001\u3082\u3046\u51ac\u306e\u6c17\u914d\u3055\u3048\u3082\u611f\u3058\u59cb\u3081\u308b\u4eca\u65e5\u3053\u306e\u9803\u306b\u306a\u3063\u3066\u304d\u307e\u3057\u305f\u306d\u3002 \u7686\u3055\u3093\u306f\u3069\u306e\u69d8\u306bclass\u3092\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u304b\uff1f \u3048\uff1f\u53d6\u5f97\u3057\u306a\u3044\uff1f \u305d\u3093\u306a\u53d6\u5f97\u3057\u306a\u3044\u65b9\u3005\u306b\u3082\u7c21\u5358\u306b\u53d6\u5f97\u51fa\u6765\u308b\u4e16\u306e\u4e2d\u306b\u306a\u308a\u307e\u3057\u305f\u3002 \u4eca [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[171,59,177,168,176,40,166,37,47,179,50,44,45,118],"class_list":{"0":"post-4075","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-javascript","7":"tag-android","8":"tag-android-sdk","9":"tag-css3","10":"tag-html","11":"tag-html5","12":"tag-ios-sdk","13":"tag-iphone","14":"tag-iphone-","15":"tag-javascript-2","16":"tag-jquery","17":"tag-jquery-mobile","18":"tag-web","20":"tag-118"},"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4075"}],"version-history":[{"count":5,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4075\/revisions"}],"predecessor-version":[{"id":10173,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4075\/revisions\/10173"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}