我要评论掌握 javascript 的核心之一：dom，能够熟悉dom相关操作，了解javascript事件机制
一、使用getelementbyid()、getelementsbytagname()、childnodes、parentnode找dom
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>找到dom-getelementby—</title>
7 </head>
8
9 <body>
10 <div id="wrapper">
11 <div id="news-top" class="section">
12 <h3>some title</h3>
13 <div class="content">
14 <ul>
15 <li><span>html</span><a href="">some link1</a></li>
16 <li><span>js</span><a class="active" href="">some link2</a></li>
17 <li><span>css</span><a href="">some link3</a></li>
18 <li><span>js</span><a href="">some link4</a></li>
19 </ul>
20 </div>
21 <img src="">
22 <p class="">some text</p>
23 </div>
24 <div id="news-normal" class="section">
25 <h3>some title</h3>
26 <div class="content">
27 <ul>
28 <li><span>html</span><a href="">some link1</a></li>
29 <li><span>html</span><a href="">some link2</a></li>
30 <li><span>js</span><a class="active" href="#">some link3</a></li>
31 <li><span>css</span><a href="">some link4</a></li>
32 <li><span>js</span><a class="active" href="#">some link1</a></li>
33 </ul>
34 </div>
35 <img src="">
36 <p class="">some text</p>
37 </div>
38 </div>
39 <script>
40 function getalllistitem() {
41 // 返回页面中所有li标签
42 var list = document.getelementsbytagname("li");
43 console.log(list);
44 }
45
46 function findallhtmlspaninonesection(sectionid) {
47 // 返回某个section下所有span中内容为html的span标签
48 var section = document.getelementbyid(sectionid).getelementsbytagname("span");
49 for (i = 0; i < section.length; i++) {
50 if (section[i].innerhtml === "html") {
51 console.log(section[i]);
52 }
53 }
54 }
55
56 function findlistitem(sectionid, spancont) {
57 // 返回某个section下，所有所包含span内容为spancont的li标签
58 var section = document.getelementbyid(sectionid).getelementsbytagname("span");
59 for (i = 0; i < section.length; i++) {
60 if (section[i].innerhtml === spancont) {
61 console.log(section[i].parentnode);
62 }
63 }
64 }
65
66 function getactivelinkcontent(sectionid) {
67 // 返回某个section下，class为active的链接中包含的文字内容
68 var section = document.getelementbyid(sectionid).getelementsbyclassname("active");
69 for (i = 0; i < section.length; i++) {
70 console.log(section[i].innerhtml);
71 }
72
73 }
74
75 getalllistitem();
76
77 findallhtmlspaninonesection("news-top");
78 findallhtmlspaninonesection("news-normal");
79
80 findlistitem("news-top", "js");
81 findlistitem("news-normal", "js");
82 findlistitem("news-normal", "css");
83
84 getactivelinkcontent("news-top");
85 getactivelinkcontent("news-normal");
86 </script>
87 </body>
88
89 </html>
二、使用queryselector及queryselectorall找dom
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>找到dom-queryselector—</title>
7 </head>
8
9 <body>
10 <div id="wrapper">
11 <div id="news-top" class="section">
12 <h3>some title</h3>
13 <div class="content">
14 <ul>
15 <li><span>html</span><a href="">some link1</a></li>
16 <li><span>js</span><a class="active" href="">some link2</a></li>
17 <li><span>css</span><a href="">some link3</a></li>
18 <li><span>js</span><a href="">some link4</a></li>
19 </ul>
20 </div>
21 <img src="">
22 <p class="">some text</p>
23 </div>
24 <div id="news-normal" class="section">
25 <h3>some title</h3>
26 <div class="content">
27 <ul>
28 <li><span>html</span><a href="">some link1</a></li>
29 <li><span>html</span><a href="">some link2</a></li>
30 <li><span>js</span><a class="active" href="#">some link3</a></li>
31 <li><span>css</span><a href="">some link4</a></li>
32 <li><span>js</span><a class="active" href="#">some link1</a></li>
33 </ul>
34 </div>
35 <img src="">
36 <p class="">some text</p>
37 </div>
38 </div>
39 <script>
40 function getalllistitem() {
41 // 返回页面中所有li标签
42 var list = document.queryselectorall("li");
43 for (i = 0; i < list.length; i++) {
44 console.log(list[i]);
45 }
46 }
47
48 function findallhtmlspaninonesection(sectionid) {
49 // 返回某个section下所有span中内容为html的span标签
50 var section = document.queryselector("#" + sectionid).queryselectorall("span");
51 for (i = 0; i < section.length; i++) {
52 if (section[i].innerhtml === "html") {
53 console.log(section[i]);
54 }
55 }
56 }
57
58 function findlistitem(sectionid, spancont) {
59 // 返回某个section下，所有所包含span内容为spancont的li标签
60 var section = document.queryselector("#" + sectionid).queryselectorall("span");
61 for (i = 0; i < section.length; i++) {
62 if (section[i].textcontent === spancont) {
63 console.log(section[i].parentnode);
64 }
65 }
66 }
67
68 function getactivelinkcontent(sectionid) {
69 // 返回某个section下，class为active的链接中包含的文字内容
70 var section = document.queryselector("#" + sectionid).queryselectorall(".active");
71 for (i = 0; i < section.length; i++) {
72 console.log(section[i].textcontent);
73 }
74 }
75
76 getalllistitem();
77
78 findallhtmlspaninonesection("news-top");
79 findallhtmlspaninonesection("news-normal");
80
81 findlistitem("news-top", "js");
82 findlistitem("news-normal", "js");
83 findlistitem("news-normal", "css");
84
85 getactivelinkcontent("news-top");
86 getactivelinkcontent("news-normal");
87 </script>
88 </body>
89
90 </html>
三、注意点：
innertext 与 innerhtml 都是打印标签之间的文本信息
1、innertext 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textcontent
2、innerhtml 打印标签之间的内容，包括标签和文本信息，各浏览器都支持，但是高版本的浏览器会原样打印
3、但是使用innertext 会有兼容性，低版本的火狐浏览器不支持使用，而是支持使用textcontent，因此我们需要封装一个兼容版本，以及调用方法
1 var box = document.getelementbyid("box");
2 调用方法
3 var str = gettext(box);
4 console.log(str);
5 /**
6 * 封装了一个获取标签之间的文本信息兼容版本函数
7 * @param element 标签对象
8 * @returns {*}
9 */
10 function gettext(element) {
11 if(element.innertext) {
12 return element.innertext; //ie8及之前的浏览器支持，现在两者都支持
13 }else {
14 return element.textcontent; //低版本的火狐支持
15 }
16 }
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论