{"id":4754,"date":"2022-03-27T20:41:45","date_gmt":"2022-03-27T12:41:45","guid":{"rendered":"https:\/\/egonlin.com\/?p=4754"},"modified":"2022-03-27T20:41:45","modified_gmt":"2022-03-27T12:41:45","slug":"%e7%ac%ac%e5%9b%9b%e8%8a%82%ef%bc%9ajq%e7%9a%84dom%e6%93%8d%e4%bd%9c","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=4754","title":{"rendered":"\u7b2c\u56db\u8282\uff1ajq\u7684dom\u64cd\u4f5c"},"content":{"rendered":"

JQ\u7684DOM\u64cd\u4f5c<\/h2>\n

\u60f3\u5fc5\u5927\u5bb6\u5b66\u4e60\u5b8c\u4e4b\u524d\u7684\u5185\u5bb9\uff0c\u5df2\u7ecf\u77e5\u9053\u4e86css\u9009\u62e9\u5668\u672c\u8d28\u5c31\u662fcss\u4e0ehtml\u4e24\u79cd\u8bed\u6cd5\u5efa\u7acb\u5173\u8054\u7684\u7279\u5b9a\u6807\u8bc6\u7b26\uff0c\u90a3\u5728JS\u8bed\u8a00\u7684\u8bed\u6cd5\u4e2d\uff0c\u4e5f\u6709\u7279\u70b9\u7684\u65b9\u5f0f\u4e0ehtml\u8bed\u8a00\u7f16\u5199\u7684\u8868\u60c5\u5efa\u7acb\u5173\u8054\uff0c\u6211\u4eec\u5c31\u79f0\u4e4b\u4e3aJS\u9009\u62e9\u5668\u3002<\/p>\n

1\u3001getElement\u7cfb\u5217<\/h2>\n
\/\/ 1.\u901a\u8fc7id\u540d\u83b7\u53d6\u552f\u4e00\u6ee1\u8db3\u6761\u4ef6\u7684\u9875\u9762\u5143\u7d20\ndocument.getElementById('id\u540d');\n\/\/ \u8be5\u65b9\u6cd5\u53ea\u80fd\u7531document\u8c03\u7528\n\n\/\/ 2\u3001\u901a\u8fc7class\u540d\u83b7\u53d6\u6240\u6709\u6ee1\u8db3\u6761\u4ef6\u7684\u9875\u9762\u5143\u7d20\ndocument.getElementsByClassName('class\u540d');\n\/\/ \u8be5\u65b9\u6cd5\u53ef\u4ee5\u7531document\u53ca\u4efb\u610f\u9875\u9762\u5143\u7d20\u5bf9\u8c61\u8c03\u7528\n\/\/ \u8fd4\u56de\u503c\u4e3aHTMLCollection (\u4e00\u4e2a\u7c7b\u6570\u7ec4\u7ed3\u679c\u7684\u5bf9\u8c61\uff0c\u4f7f\u7528\u65b9\u5f0f\u540c\u6570\u7ec4)\n\/\/ \u6ca1\u6709\u5339\u914d\u5230\u4efb\u4f55\u7ed3\u679c\u8fd4\u56de\u7a7aHTMLCollection\u5bf9\u8c61 ([])\n\n\/\/ 3.\u901a\u8fc7tag\u540d\u83b7\u53d6\u6240\u6709\u6ee1\u8db3\u6761\u4ef6\u7684\u9875\u9762\u5143\u7d20\ndocument.getElementsByTagName('tag\u540d');\n\/\/ \u8be5\u65b9\u6cd5\u53ef\u4ee5\u7531document\u53ca\u4efb\u610f\u9875\u9762\u5143\u7d20\u5bf9\u8c61\u8c03\u7528\n\/\/ \u8fd4\u56de\u503c\u4e3aHTMLCollection (\u4e00\u4e2a\u7c7b\u6570\u7ec4\u7ed3\u679c\u7684\u5bf9\u8c61\uff0c\u4f7f\u7528\u65b9\u5f0f\u540c\u6570\u7ec4)\n\/\/ \u6ca1\u6709\u5339\u914d\u5230\u4efb\u4f55\u7ed3\u679c\u8fd4\u56de\u7a7aHTMLCollection\u5bf9\u8c61 ([])<\/code><\/pre>\n
2\u3001querySelect\u7cfb\u5217<\/h2>\n
\/\/ 1.\u83b7\u53d6\u7b2c\u4e00\u4e2a\u5339\u914d\u5230\u7684\u9875\u9762\u5143\u7d20\ndocument.querySelector('css3\u8bed\u6cd5\u9009\u62e9\u5668');\n\/\/ \u8be5\u65b9\u6cd5\u53ef\u4ee5\u7531document\u53ca\u4efb\u610f\u9875\u9762\u5bf9\u8c61\u8c03\u7528\n\n\/\/ 2.\u83b7\u53d6\u6240\u6709\u5339\u914d\u5230\u7684\u9875\u9762\u5143\u7d20\ndocument.querySelectorAll('css3\u8bed\u6cd5\u9009\u62e9\u5668');\n\/\/ \u8be5\u65b9\u6cd5\u53ef\u4ee5\u7531document\u53ca\u4efb\u610f\u9875\u9762\u5bf9\u8c61\u8c03\u7528\n\/\/ \u8fd4\u56de\u503c\u4e3aNodeList (\u4e00\u4e2a\u7c7b\u6570\u7ec4\u7ed3\u679c\u7684\u5bf9\u8c61\uff0c\u4f7f\u7528\u65b9\u5f0f\u540c\u6570\u7ec4)\n\/\/ \u6ca1\u6709\u5339\u914d\u5230\u4efb\u4f55\u7ed3\u679c\u8fd4\u56de\u7a7aNodeList\u5bf9\u8c61 ([])<\/code><\/pre>\n
2-1 \u6848\u4f8b\uff1a<\/h3>\n
<body>\n    <div id="box" class="box"><\/div>\n    <script>\n        var box1 = document.getElementById('box');\n        var box2 = document.querySelector('.box');\n        \/\/ box1 === box2\uff0c\u5c31\u4ee3\u8868\u9875\u9762id\u4e3abox\uff0cclass\u4e3abox\u7684div\u6807\u7b7e\n    <\/script>\n<\/body><\/code><\/pre>\n
3\u3001JS\u9875\u9762\u64cd\u4f5c<\/h2>\n
\u6211\u4eec\u5b66\u4e60\u5b8cJS\u7684\u57fa\u672c\u8bed\u6cd5\u540e\uff0c\u77e5\u9053\u5982\u4f55\u7b80\u5355\u4f7f\u7528JS\u8bed\u8a00\uff0c\u6709\u638c\u63e1\u4e86JS\u9009\u62e9\u5668\uff0c\u5c31\u53ef\u4ee5\u4e0e\u9875\u9762\u5efa\u7acb\u8d77\u8054\u7cfb\uff0c\u90a3\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u54ea\u4e9b\u65b9\u5f0f\u4e0e\u9875\u9762\u6807\u8bb0\u8fdb\u884c\u4ea4\u4e92\uff1f\u6709\u53ef\u4ee5\u5728\u4ea4\u4e92\u7684\u8fc7\u7a0b\u4e2d\u5bf9\u6807\u7b7e\u8fdb\u884c\u54ea\u4e9b\u5177\u4f53\u7684\u64cd\u4f5c\u5462\uff1f<\/p>\n
3-1 \u9f20\u6807\u4e8b\u4ef6<\/h3>\n
\u6211\u4eec\u5148\u6765\u770b\u4e00\u4e0b\u4ea4\u4e92\u7684\u65b9\u5f0f\uff0c\u53eb\u505a\u6807\u7b7e\u5bf9\u8c61\u7684\u4e8b\u4ef6\u7ed1\u5b9a\uff0c\u53ef\u4ee5\u7ed1\u5b9a\u7684\u4e8b\u4ef6\u6709\uff1a<\/p>\n
\/*\nonclick\uff1a\u9f20\u6807\u70b9\u51fb\nondblclick\uff1a\u9f20\u6807\u53cc\u51fb\nonmousedown\uff1a\u9f20\u6807\u6309\u4e0b\nonmousemove\uff1a\u9f20\u6807\u79fb\u52a8\nonmouseup\uff1a\u9f20\u6807\u62ac\u8d77\nonmouseover\uff1a\u9f20\u6807\u60ac\u6d6e\nonmouseout\uff1a\u9f20\u6807\u79fb\u5f00\noncontextmenu\uff1a\u9f20\u6807\u53f3\u952e\n*\/<\/code><\/pre>\n
3-2 \u4e8b\u4ef6\u7684\u7ed1\u5b9a<\/h3>\n
\u5177\u4f53\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u65b9\u5f0f\uff1a<\/p>\n
<body>\n    <div class="box">\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\u540e\u53ef\u4ee5\u5b8c\u6210\u70b9\u51fb\u4ea4\u4e92<\/div>\n    <script>\n        var box = document.querySelector('.box');\n        \/\/ \u9875\u9762class\u4e3abox\u7684div\u88ab\u9f20\u6807\u70b9\u51fb\u540e\u4f1a\u6709\u5f39\u51fa\u6846\n        box.onclick = function() {\n            alert("box\u6807\u7b7e\u88ab\u70b9\u51fb\u4e86")\n        }\n    <\/script>\n<\/body>\n<\/code><\/pre>\n
\u90a3\u4e48\u7ed1\u5b9a\u5b8c\u4e8b\u4ef6\u540e\u53c8\u53ef\u4ee5\u600e\u6837\u5177\u4f53\u64cd\u4f5c\u9875\u9762\u6807\u7b7e\u5462\uff1f<\/p>\n
3-3 \u64cd\u4f5c\u884c\u95f4\u5f0f\u6837\u5f0f<\/h3>\n
<head>\n    <style>\n        .box {\n            width: 200px;\n            height: 200px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class="box" style="background-color: red"><\/div>\n    <script>\n        var box = document.querySelector('.box');\n        \/\/ \u8bed\u6cd5\uff1a\u9875\u9762\u5bf9\u8c61.\u5168\u5c40style\u5c5e\u6027.\u5177\u4f53\u7684\u6837\u5f0f\u540d\n        box.onclick = function() {\n            \/\/ \u8bfb\uff1a\u83b7\u53d6\u884c\u95f4\u5f0f\u6837\u5f0f\u503c \n            var bgColor = box.style.backgroundColor;  \n            \/\/ \u5199\uff1a\u5bf9\u884c\u95f4\u5f0f\u6837\u5f0f\u8fdb\u884c\u8d4b\u503c\uff0c\u521d\u59cb\u6ca1\u6709\u8be5\u6761\u884c\u95f4\u5f0f\u6837\u5f0f\uff0c\u76f8\u540c\u4f1a\u81ea\u52a8\u6dfb\u52a0\u8bbe\u7f6e\u597d\u7684\u884c\u95f4\u5f0f\n            box.style.backgroundColor = 'orange';  \/\/ css3\u591a\u4e2a\u5355\u8bcd\u7684\u5c5e\u6027\u540d\u91c7\u7528\u5c0f\u9a7c\u5cf0\u547d\u540d\u6cd5\n        }\n    <\/script>\n<\/body><\/code><\/pre>\n
3-4 \u53ea\u8bfb \u8ba1\u7b97\u540e \u6837\u5f0f<\/h3>\n
<head>\n    <style>\n        .box {\n            width: 200px;\n            height: 200px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class="box" style="background-color: red"><\/div>\n    <script>\n        var box = document.querySelector('.box');\n        \/\/ \u8bed\u6cd5\uff1agetComputedStyle(\u9875\u9762\u5143\u7d20\u5bf9\u8c61, \u4f2a\u7c7b).\u6837\u5f0f\u540d;\n        \/\/ \u6ce8\uff1a\u6211\u4eec\u4e0d\u9700\u8981\u8003\u8651\u4f2a\u7c7b\u7684\u8303\u7574\uff0c\u76f4\u63a5\u7528null\u586b\u5145\u5373\u53ef\n        box.onclick = function() {\n            \/\/ \u53ea\u8bfb\uff1a\u83b7\u53d6\u8ba1\u7b97\u540e\u6837\u5f0f\u503c \n            var width = getComputedStyle(box, null).width;  \n        }\n    <\/script>\n<\/body><\/code><\/pre>\n
3-5 \u64cd\u4f5c\u6807\u7b7eclass\u540d<\/h3>\n
<body>\n    <div class="box">class\u540d\u64cd\u4f5c<\/div>\n    <script>\n        var box = document.querySelector('.box');\n        \/\/ \u67e5\u770b\u7c7b\u540d\n        var cName = box.className;\n        \/\/ \u4fee\u6539\u7c7b\u540d\n        box.className = "ele";\n        \/\/ \u589e\u52a0\u7c7b\u540d\n        box.className = " tag";  \/\/ \u6dfb\u52a0\u540e\u7684\u7ed3\u679cclass="ele tag"\uff0c\u6240\u4ee5\u8d4b\u503c\u65f6\u4e00\u5b9a\u6ce8\u610ftag\u524d\u6709\u4e2a\u7a7a\u683c\u5b57\u7b26\u4e32\n        \/\/ \u5220\u9664\u6240\u6709\u7c7b\u540d\n        box.className = "";\n    <\/script>\n<\/body><\/code><\/pre>\n
3-6 \u64cd\u4f5c\u6807\u7b7e\u5168\u5c40\u5c5e\u6027\u503c<\/h3>\n
<body>\n    <img src="https:\/\/www.baidu.com\/favicon.ico" class="image" \/>\n    <script>\n        var img = document.querySelector('.image');\n        \/\/ \u67e5\u770b\u5168\u5c40\u5c5e\u6027\u503c\n        var imgSrc = img.getAttribute('src');\n        \/\/ \u4fee\u6539\u5168\u5c40\u5c5e\u6027\u503c\n        img.setAttribute('src', 'img\/bg_logo.png');\n        \/\/ \u5220\u9664\u5168\u5c40\u5c5e\u6027\u503c\n        img.setAttribute = ('src', '');;\n    <\/script>\n<\/body><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
JQ\u7684DOM\u64cd\u4f5c \u60f3\u5fc5\u5927\u5bb6\u5b66\u4e60\u5b8c\u4e4b\u524d\u7684\u5185\u5bb9\uff0c\u5df2\u7ecf\u77e5\u9053\u4e86css\u9009\u62e9\u5668\u672c\u8d28\u5c31\u662fcss\u4e0ehtml\u4e24\u79cd\u8bed\u6cd5\u5efa\u7acb\u5173\u8054\u7684\u7279 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[361,365],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4754"}],"collection":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4754"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4754\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}