[Powered by Google Translate] [DOM] [ಟಾಮಿ MacWilliams] [ಹಾರ್ವರ್ಡ್ ವಿಶ್ವವಿದ್ಯಾಲಯ] [ಈ CS50 ಹೊಂದಿದೆ.] [CS50.TV] ಈ ವೀಡಿಯೊವನ್ನು ನಾವು DOM ಒಂದು ನೋಟ ತೆಗೆದುಕೊಂಡು ಹೊರಟಿರುವೆ. ಒಂದು ಬ್ರೌಸರ್ ವೆಬ್ಪುಟ ಡೌನ್ಲೋಡ್ ಅದು ಹೇಗೋ ನೆನಪಿಗಾಗಿ ನಿರೂಪಿಸಲಾಗಿದೆ ಅಗತ್ಯವಿದೆ. ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್, ಅಥವಾ DOM, ಬ್ರೌಸರ್ ನೆನಪಿಗಾಗಿ ವೆಬ್ಪುಟ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ. ಈ ವಿಡಿಯೋದಲ್ಲಿ, ನಾವು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸನ್ನಿವೇಶದಲ್ಲಿ DOM ಒಂದು ನೋಟ ತೆಗೆದುಕೊಂಡು ಮಾಡುತ್ತೇವೆ ಆದರೆ DOM ಒಂದು ಭಾಷೆ ಸ್ವತಂತ್ರ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಪಿಎಚ್ಪಿ ಜೊತೆಗೆ ತನ್ನದೇ ಆದ DOM ಅನುಷ್ಠಾನ ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, DOM ಆಗಾಗ್ಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿಕೊಂಡಿದ್ದಾರೆ ಇದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಮಗೆ ಹಾರಾಡುತ್ತ ವೆಬ್ಪುಟದ ವಿಷಯಗಳ ಬದಲಾಯಿಸಲು ಅನುಮತಿಸುತ್ತದೆ ರಿಂದ, ಮತ್ತು DOM ನಮಗೆ ಒಂದು ವೆಬ್ಪುಟದ ಭಾಗಗಳು ಪ್ರವೇಶಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ತಂದೆಯ ಉದಾಹರಣೆ ವೆಬ್ಪುಟವನ್ನು ಒಂದು ಗಮನಿಸೋಣ. ಸರಿ, ಈಗ ಈ ಪುಟ DOM ರಲ್ಲಿ ನಿರೂಪಿಸಲಾಗಿದೆ ನಡೆಯಲಿದೆ ಹೇಗೆ ನೋಡೋಣ. ಮತ್ತು ಪ್ರತಿ ಮರದ ಮೇಲಿರುವ ಒಂದು ಮೂಲ ನೋಡ್ ಹೊಂದುವ ಅಗತ್ಯವಿದೆ. ಈ ದಾಖಲೆ, ಎಚ್ಟಿಎಮ್ಎಲ್ ಅಂಶ ರೂಟ್ ನೋಡ್ ಏಕೆಂದರೆ ಇದು ಕಾಣಿಸಿಕೊಳ್ಳುವ ಮೊದಲ ಅಂಶ ಇಲ್ಲಿದೆ. ನಮ್ಮ ಮರದ ರೂಟ್ ನೋಡ್ ಸೇರಿಸಲು ಅವಕಾಶ. ತಂದೆಯ ಮತ್ತೆ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಒಂದು ಗಮನಿಸೋಣ. ದೇಹದ ಟ್ಯಾಗ್ HTML ಟ್ಯಾಗ್ ಒಳಭಾಗದ ರೀತಿಯಲ್ಲಿ ಇದೆ ಎಂದು ಗಮನಿಸಿ. ಈ ದೇಹದ ಅಂಶ ಎಚ್ಟಿಎಮ್ಎಲ್ ಅಂಶ ಒಂದು ಮಗು ಎಂದು ಅರ್ಥ. ನಾವು ದೇಹದ ಒಂದು ಲೀಫ್ ಮಾಡುವ ಮೂಲಕ ನಮ್ಮ DOM ಟ್ರೀಯ ಈ ಪ್ರತಿನಿಧಿಸಬಹುದು HTML ದಿಂದ ಅವರೋಹಣ. ತಂದೆಯ ಎಂದು ಮಾಡೋಣ. ನಾವು HTML ಕೆಳಗಿರುವ ದೇಹದ ಹೊಂದಿರುತ್ತದೆ. ಈಗ ನಾವು, ದೇಹದ ತನ್ನದೇ ಆದ 2 ಮಕ್ಕಳಿದ್ದಾರೆ ನೋಡಬಹುದು H1 ಅಂಶ ಮತ್ತು ಉಲ್ ಅಂಶ. ಈ ನಾವು ಆ ಅಂಶಗಳನ್ನು ಎರಡೂ ಸಂಪರ್ಕಿಸಬಹುದು ಎಂದು ಅರ್ಥ ದೇಹದ ಅಂಶ ಗೆ, ಆದ್ದರಿಂದ ತಂದೆಯ ಹಾಗೆ ಅವಕಾಶ. ನಾವು ಒಂದು H1 ಮತ್ತು ಒಂದು ಉಲ್ ಹೊಂದಿರುತ್ತವೆ. ಅಂತಿಮವಾಗಿ, ಉಲ್ ಅಂಶ, 3 ಹೆಚ್ಚು ಮಕ್ಕಳಿದ್ದಾರೆ ಮತ್ತು ಈ ನಮ್ಮ DOM ಮರದ ಪೂರ್ಣಗೊಳಿಸುತ್ತಾರೆ, ಆದ್ದರಿಂದ ಲಿ, ಲಿ, ಲಿ ಸೇರಿಸಿ ಹೊರಡೋಣ. ಈ ನಮ್ಮ DOM ಮರದ ಪೂರ್ಣಗೊಂಡ, ಮತ್ತು ಈ ಬ್ರೌಸರ್ ನಿಮ್ಮ ವೆಬ್ ಉಳಿಸುವುದು ಹೇಗೆ. ಈಗ ನಾವು JavaScript ಬಳಸಿ ಈ ಮರದ ಹಾದುಹೋಗುವಂತೆ ಮಾಡಬಹುದು ಹೇಗೆ ಅವಲೋಕಿಸೋಣ. ನಾವು ಡಾಕ್ಯುಮೆಂಟ್ ಎಂಬ ವಿಶೇಷ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೇರಿಯಬಲ್ ಬಳಸಿಕೊಂಡು ಈ ಮರದ ಪ್ರವೇಶಿಸಬಹುದು. ಈ ಡಾಕ್ಯುಮೆಂಟ್ ವಸ್ತುವಿನ ಒಂದು ಆಸ್ತಿ ದೇಹದ ಆಸ್ತಿಯಾಗಿದೆ, ಮತ್ತು ಈ ವಸ್ತುವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ನಮ್ಮ ಉದಾಹರಣೆಗೆ ವೆಬ್ಪುಟವನ್ನು ದೇಹದ ಅಂಶ. ನಾವು, ದೇಹದ ಅಂಶ ಮಕ್ಕಳ ಎಲ್ಲಾ ಪಡೆಯಲು ಬಯಸಿದರೆ ಇದು ನೀವು ಮರೆಯದಿರಿ ವೇಳೆ, ಎಂದು H1 ಟ್ಯಾಗ್ ಮತ್ತು ಉಲ್ ಟ್ಯಾಗ್ ಹೊಂದಿದೆ ನಾವು document.body.childNodes ಹೇಳಬಹುದು. ಮತ್ತು ಈ ನಮಗೆ H1 ಅಂಶ ಎರಡೂ ಹೊಂದಿರುವ ಒಂದು ಶ್ರೇಣಿಯನ್ನು ಮತ್ತೆ ನೀಡುತ್ತದೆ ಮತ್ತು ಅವರು ದೇಹದ ಎರಡೂ ನೇರ ಮಕ್ಕಳು ಕೋರುತ್ತೇವೆ ರಿಂದ ಉಲ್ ಅಂಶ. ನಾವು ಉಲ್ ಅಂಶ ಪ್ರತಿನಿಧಿಸುವ ಒಂದು ವೇರಿಯಬಲ್ ರಚಿಸಲು ಬಯಸಿದರೆ ನಾವು ಅಪ್ ಇಲ್ಲಿ vrr ಉಲ್ = ಈ ಕೋಡ್ ಹೇಳಬಹುದು ಮತ್ತು ಈಗ childNodes ಕೇವಲ ಒಂದು ಶ್ರೇಣಿಯನ್ನು ಏಕೆಂದರೆ ನಾವು [1] ಇದನ್ನು ಒಳಗೆ ಸೂಚ್ಯಂಕ ಆ ರಚನೆಯ ಎರಡನೆಯ ಅಂಶ ಪಡೆಯಲು. ಮಾಡಬಹುದು ಈ ಹೊಸ ಉಲ್ ವಸ್ತುವಿನಿಂದ ನಾವು ಇದರ ID ರೀತಿಯ ಅಂಶ ವಿವಿಧ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪ್ರವೇಶಿಸಬಹುದು. ನಾವು ಸ್ಟ್ರಿಂಗ್ ಪಟ್ಟಿ ಸಮಾನವಾಗಿರುತ್ತದೆ ಎಂದು ವಿಶೇಷವೇನು ಎಂದು ul.id ಹೇಳಲು ವೇಳೆ ನಾವು ನಮ್ಮ HTML ಪುಟದಲ್ಲಿ ಏನು ಏಕೆಂದರೆ. ನಾವು ಈ ಸಂದರ್ಭದಲ್ಲಿ ಎಂದು ನಾನು ಇದು, ತನ್ನ ಟ್ಯಾಗ್ ಹೆಸರನ್ನು ಪಡೆಯುವುದು ಅಂಶ ಯಾವ ರೀತಿಯ ಇದು ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಒಂದು ಉಲ್ ರಲ್ಲಿ ಆಗಿದೆ. ನಾವು ತನ್ನ ಪೋಷಕರು ಅಥವಾ ಅದರ ಮೇಲೆ ನೋಡ್, ಪಡೆಯುವುದು ಈ ಸಂದರ್ಭದಲ್ಲಿ ದೇಹದ ಅಂಶ ಎಂದು ನಾನು. ನಾವು document.body ಅದೇ ಎಂದು ವಿಶೇಷವೇನು ಎಂದು. ParentNode, ಹೇಳಲು ವೇಳೆ. ಸಹಜವಾಗಿ, ಈ ಉಲ್, ತನ್ನದೇ ಆದ ಮಕ್ಕಳಿದ್ದಾರೆ ಆದ್ದರಿಂದ ನಾವು ಇನ್ನೂ ಹೇಳಬಹುದು. childNodes ಈ ಅಂಶ ಮೇಲೆ, ನಮ್ಮ ಪಟ್ಟಿಯಲ್ಲಿ 3 ಐಟಂಗಳನ್ನು ಇರುವುದರಿಂದ ಮತ್ತು ಈ ಸರಣಿ ಈಗ ಉದ್ದ 3 ಇರಬೇಕು. ಅಂತಿಮವಾಗಿ, ಬಹುಶಃ ಅತ್ಯಂತ ಉಪಯುಕ್ತ ಆಸ್ತಿ ಎಂದು ನಾನು. InnerHTML, ಮತ್ತು ಈ ಪಟ್ಟಿಯ ವಾಸ್ತವಿಕ ವಿಷಯಗಳ ಇರುತ್ತದೆ ಇದು ನಮ್ಮ ಉದಾಹರಣೆಗೆ ಪುಟದಲ್ಲಿ ಆ 3 ಲಿ ಟ್ಯಾಗ್ ಗಳು. ಸಹಜವಾಗಿ, ನಾವು ಒಂದು ದೊಡ್ಡ ದಾಖಲೆ ಹೊಂದಿದ್ದರೆ, ಅಂಶಗಳನ್ನು ಪ್ರವೇಶಿಸುವ ಈ ರೀತಿಯಲ್ಲಿ ನಿಜವಾಗಿಯೂ ತೊಡಕಿನ ಎಂದು ನಾನು ಏಕೆಂದರೆ ಅಂತಿಮವಾಗಿ ನಾವು document.body.childNodes ವಿಷಯಗಳಿಗಾಗಿ ಹೇಳಲು ಮಾಡುತ್ತೇವೆ ಬ್ರಾಕೆಟ್ ಏನೋ., ಬೇರೆ ಬ್ರಾಕೆಟ್ ಏನೋ childNodes ಮತ್ತು ಇದು ನಿಜವಾಗಿಯೂ ತೊಡಕಿನ ಪಡೆಯಲು ಇಂದಿನ ವಿಶೇಷವೇನು. ಬದಲಿಗೆ ನಾವು ನಿಜವಾಗಿಯೂ ಮಾಡಲು ಬಯಸುವ ಆಗಿದೆ, ನಿಮ್ಮಪ್ರಶ್ನೆಗೆ ಸಾಧ್ಯವಾಗುತ್ತದೆ ಆದ್ದರಿಂದ ನಾವು ಕೀವರ್ಡ್ಗಳನ್ನು ಬಳಸಿ ಅಂತರ್ಜಾಲದಲ್ಲಿ ವಸ್ತುಗಳನ್ನು ಹುಡುಕುತ್ತದೆ ಇಷ್ಟ ನಾವು ನಿಜವಾಗಿಯೂ ಸಂಕ್ಷೇಪವಾಗಿ ಈ ಡಾಕ್ಯುಮೆಂಟ್ ಹುಡುಕಲು ಕೆಲವು ರೀತಿಯಲ್ಲಿ ಅಗತ್ಯ ನಾವು ಕಾಳಜಿವಹಿಸುವ ಮಾತ್ರ ಅಂಶಗಳನ್ನು ಹಾದುಹೋಗುವ ಇಲ್ಲದೆ ಹಿಂದೆ ಕೆಳಕ್ಕೆ ಸಂಪೂರ್ಣ ಮರದ ಟಾಪ್. ಅದೃಷ್ಟಕ್ಕೆ, ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ನಮಗೆ ಇದನ್ನು ಮಾಡಲು ಅವಕಾಶ querySelectorAll ಎಂಬ ವಿಶೇಷ ಕಾರ್ಯದ, ಮತ್ತು ಈ ಕ್ರಿಯೆಯ ಒಂದು ವಾದದ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಒಂದು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆ ಹೊಂದಿದೆ, ಮತ್ತು ಇದು ನಮಗೆ ಹಿಂದಿರುಗಲು ಇಂದಿನ ವಿಶೇಷವೇನು ಎಂದು ಆಯ್ಕೆ ಸರಿಹೊಂದುವ ಅಂಶಗಳನ್ನು ಎಲ್ಲಾ. ನೀವು DOM ಪ್ರಶ್ನಿಸಿದ ಒಂದು ಸಂಪೂರ್ಣ ಹೊಸ ವಾಕ್ಯ ತಿಳಿಯಲು ಅಗತ್ಯವಿರುವುದಿಲ್ಲ ಅರ್ಥ. ಬದಲಿಗೆ ನೀವು ಈಗಾಗಲೇ ತಿಳಿದಿರುವ ಜ್ಞಾನವನ್ನು ಅನ್ವಯಿಸಬಹುದು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆ ಬಗ್ಗೆ. ದಾಖಲೆ ಪ್ರಶ್ನಿಸಿದ ಕೆಲವು ಉದಾಹರಣೆಗಳು ಒಂದು ಗಮನಿಸೋಣ. ನಾವು querySelectorAll ಹೇಳುತ್ತಾರೆ ಮತ್ತು ಈ ಸರಣಿಯನ್ನು # foo ಹಾದು ವೇಳೆ ನಮಗೆ ID foo ಜೊತೆ ಅಂಶ ಮರಳಿ ನೀಡಲು ಇಂದಿನ ವಿಶೇಷವೇನು. ನೀವು document.getElementByID ಹೇಳಬಹುದು ಮತ್ತು ಆ ಹ್ಯಾಶ್ಟ್ಯಾಗ್ ಇಲ್ಲದೆ ಸ್ಟ್ರಿಂಗ್ foo ಹಾದು. ನೀವು ಅದೇ ನಿಖರ ವಸ್ತು ಮರಳಿ ಪಡೆಯಲು ಹೊರಟಿರುವೆ. ಬದಲಿಗೆ ನಾವು document.querySelectorAll ಸರಣಿಯನ್ನು. ಬಾರ್ ಹಾದು ವೇಳೆ ನಾವು ವರ್ಗ ಪಟ್ಟಿಯೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಎಲ್ಲಾ ಮರಳಿ ಪಡೆಯಲು ಹೊರಟಿರುವೆ. ನಾವು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆ ಒಂದುಗೂಡಿಸಬಹುದು. ನಾವು ಸ್ಟ್ರಿಂಗ್ # foo img ರಲ್ಲಿ ಹಾದು ವೇಳೆ ಚಿತ್ರ ಅಂಶಗಳನ್ನು ಎಲ್ಲಾ ನಮಗೆ ಮರಳಿ ನೀಡಲು ಇಂದಿನ ವಿಶೇಷವೇನು ಎಂದು ಆ ID foo ಜೊತೆ ಅಂಶ ಮಕ್ಕಳು ಇವೆ. ನೀವು ನೋಡಬಹುದು ಎಂದು, ತುಲನೆ ಆಯ್ಕೆ ಮೂಲಕ ನಾವು ಕೆಲವು ನಿಜವಾಗಿಯೂ ಪ್ರಬಲ ಹುಡುಕಾಟ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ. ಆದರೆ ಹುಡ್ ಅಡಿಯಲ್ಲಿ, DOM, ನಿಜವಾಗಿಯೂ ಕೇವಲ ಒಂದು ಮರವಾಗಿದೆ ಮತ್ತು ಈ ಆಯ್ಕೆದಾರರಿಗೆ ಕೆಲವು ಮಟ್ಟಿಗೆ ಎಂದು ದೂರ ನಮಗೆ ಅಮೂರ್ತ ಅವಕಾಶ ನಾವು ಯಾವಾಗಲೂ DOM ಮರದ ಸಂಪೂರ್ಣ ರಚನೆ ಕಾಳಜಿವಹಿಸುವ ಇಲ್ಲ ಏಕೆಂದರೆ. ಒಂದು ತ್ವರಿತ ಡಾಮ್ ಅವಲೋಕನ, ಮತ್ತು ನಮಗೆ ಸೇರುವ ಧನ್ಯವಾದಗಳು ಆಗಿತ್ತು. [CS50.TV]