python dom_python: DOM 小实例

一、全选 全部取消  反选

全选：选择指定的所有项目。

全部取消： 取消所有选定的项目。

反选: 选择未选定的，之前已选定的则取消。

1

2

3

4

5

Title

6

7

8

9

10

11

12

13

14

15

16

序号

17

用户名

18

年龄

19

20

21

22

23

24

25

alex

26

18

27

28

29

30

alex

31

18

32

33

34

35

alex

36

18

37

38

39

40

41 function Quan() {42 var a = document.getElementById("tb"); //通过id 找到这个标签43 var checks = a.getElementsByClassName("c1"); //获取class属性为c1 的标签44 for(i=0;i

69 }70

71

72

73

74

75

76

实例

二、输入框

我们进经常会遇到一个输入框 在没有输入内容的时候 他是给我们 以灰色字体显示的  “请输入内容” 。

当我们鼠标选定的时候字符串消失，这个字符串就会消失，开始输入内荣 而我们输入的内容是黑色的字体；

1

2

3

4

5

Title

6

7 .gg{8 color: #dddddd;

9 }10 .dd{11 color: black;12 }13

14

15

16

17

18 function Focus(ths) { //点击触发这个函数19 ths.value = ""; //把他的value 设置成 空字符串；20 ths.className = "dd"; //改变标签的属性样式；21 }22 function Blur(ths) { //鼠标移动之后 在外面点击 触发这个函数23 var a = ths.value; //获取他的value24 if( a == "请输入内容" || a.trim().length == 0){ //判断内容是否为空或者 是 请输入内容25 ths.className = "gg"; //如果是 给他设置样式26 ths.value = "请输入内容" //变为原来的 字符串；27 }28 }29

30

31

View Code

三、对筛选标签的操作

比如当我们遇到多数 相同的标签是，需对一部分进行操作，我们就可以按照他们的属性进行筛选；

1

2

3

4

5

Title

6

7

8

9

10

123

11

123

12

123

13

123

14

123

15

123

16

123

17

123

18

19

20 function Func() {21 var a = document.getElementById("c1");22 var b =a.children;23 for(var i=0;i

33

34

35

实例

四、小的操作栏

我们选定的菜单他会给我们相应的内容；

1

2

3

4

5

Title

6

7 ul{8 list-style: none;9 padding: 0;10 margin: 0;11 }12 ul li{13 float: left;14 background-color: #2459a2;

15 color: white;16 padding: 8px 10px;17 }18 .clearfix:after{19 display: block;20 content: ".";21 height: 0;22 visibility: hidden;23 clear: both;24 }25 .hide{26 display: none;27 }28 .tab-menu .title{29 background-color: #dddddd;

30 }31 .tab-menu .title .active{32 background-color: white;33 color: black;34 }35 .tab-menu .content{36 border: 1px solid #dddddd;

37 min-height: 150px;38 }39

40

41

42

43

44

45

46

47

48

价格趋势

49

市场分布

50

其他

51

52

53

54

content1

55

content2

56

content3

57

58

59

60

61

62

63 function Show(ths) {64 var brother = ths.parentElement.children; //获取标签父类的所有孩子65 console.log(brother);66 var targets = ths.getAttribute("target"); //获取指定属性的标签67 ths.className = "active"; //设置class属性68 for(var i=0;i

71 }else{72 brother[i].removeAttribute("class"); //其他的删除class属性73

74 }75 }76

77 var contents = document.getElementById("content").children;78 for(var j=0;j

88 }89

90

91

92

93

实例

五、输入框

有时候我们还会遇到这样的输入框, 他会自动把你输入的内荣 添加到下面的列表内

1

2

3

4

5

Title

6

7

8

9

10

11

12

13

14

alex

15

123

16

17

18

19 function AddElement(ths) {20 var val = ths.previousElementSibling.value; //获取上一个兄弟标签元素 的 value21 ths.previousElementSibling.value = ""; //把上一个兄弟标签元素的value 设为 空字符串22 var list = document.getElementById("commentList");23 //第一种字符串方式对象方式24 // var str = "

" + val + ""; //字符串拼接25 // list.insertAdjacentHTML("afterEnd",str); //插入一个标签26 //第二种对象方式27 // var tag = document.createElement("li"); //按照指定名字创建一个 标签28 // tag.innerText = val; //给这个标签 赋予内容29 // list.appendChild(tag); //添加一个子标签30 //第三种 添加的标签里面套标签31 var tag = document.createElement("li");32 tag.innerText =val;33 var temp = document.createComment("a");34 temp.innerText = "百度";35 temp.href = "www.baidu.com";36 tag.appendChild(temp); //添加一个子标签37 list.insertBefore(tag,list.children[2]); //在指定的已有标签之前插入一个新标签38 }39

40

41

View Code

1 beforeEnd //内部最后2

3 beforeBegin //外部上边4

5 afterBegin //内部贴身6

7 afterEnd // 外部贴身

六、自动返回最顶部页面

在我们浏览页面的是 由于页面太长 返回最顶部很不方便 所有又有了 这样的方法

在频幕的右下角设置一个点击框 点击一下自动返回最顶部页面

1

2

3

4

5

Title

6

7 .go-top{8 position: fixed;9 right: 28px;10 bottom: 19px;11 width: 40px;12 height: 40px;13 background-color: #2459a2;

14 color: white;15 }16 .hide{17 display: none;18 }19

20

21

22

//鼠标滑动时触发这个事件23

24

hello

25

26

27 返回顶部

28

29

30 function Func() {31 var scrollTo = document.body.scrollTop; //获取滚动高度32 var ii = document.getElementById("i2");33 if(scrollTo>100){ //如果滚动高度大于100时 让它显示出来34 ii.classList.remove("hide");35 }else{36 ii.classList.add("hide"); //否则是影藏状态37 }38 }39 function GoTop() {40 document.body.scrollTop = 0; //滑动高度设为041 }42

43

44

45

实例

七、按照浏览内容 自动显示 属于该文的菜单；

1

2

3

4

5

Title

6

7 body{8 margin: 0;9 background-color: #dddddd;

10 }11 .pg-header{12 height: 48px;13 background-color: black;14 }15 .w{16 margin: 0 auto;17 width: 980px;18 }19 .pg-body .menu{20 position: absolute;21 left: 200px;22 width: 180px;23 background-color: white;24 float: left;25 }26 .pg-body .menu .active{27 background-color: #425a66;

28 color: white;29 }30 .pg-body .fixed{31 position: fixed;32 top: 10px;33 }34 .pg-body .content{35 position: absolute;36 left: 385px;37 right: 200px;38 background-color: white;39 float: left;40 }41 .pg-body .content .item{42 height: 900px;43 }44

45

46

47

48

49

50

51

52

53

54

55

第一章

56

第二章

57

第三章

58

59

60

61

62

床前明月光

63

疑是地上霜

64

我是郭德纲

65

66

67

68 function Hua() {69 var a = document.body.offsetHeight; //body的高度70 var b = document.getElementById("content").offsetHeight; //自身高度71 var c = document.documentElement.clientHeight; //可视范围的高度72 var huaGao = document.body.scrollTop; //鼠标滚动的高度73 console.log(a,b,huaGao,c);74 var caiDan = document.getElementById("menu"); //获取标签75 if(huaGao>48){ //判断是否小于 48就是最顶端的 那个黑条的高度76 caiDan.classList.add("fixed"); //如果小于 那么 添加样式 让它固定77 }else{78 caiDan.classList.remove("fixed"); //否则删除这个样式79 }80 var items = document.getElementById("content").children; //找到他的孩子81 for(var i=0;i

95 }96 }97 mu.classList.add("active");98 return

99 }100

101 if(currentItemWindowTop<0 && bottomHeight>huaGao){ //如果滑动后的高度小于0(表面自己的底部刚消失)并且自身加自己距离最顶端的高度大于滑高(说明滑高还没滑完)102 var ziji = caiDan.getElementsByTagName("li")[i]; //找到li名字的标签 索引103 ziji.className = "active"; //把他的样式设为 active104 var lis = caiDan.getElementsByTagName("li"); //找到li名字的标签105 for(var j=0;j

108 }else{109 lis[j].classList.remove("active"); //其他的全部删除样式110 }111 }112 break

113 }114 }115 }116

117

118

实例

此次小例 重在懂得原理 熟练方法