您的位置：首页 > Web前端 > JavaScript

javascript学习笔记（九）：DOM操作HTML的各种方法使用

2017-06-15 07:12 856 查看 
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4     <meta chaset="UTF-8">
5     <title></title>
6 </head>
7 <body>
8     <p name="pname">Hello</p>
9     <p name="pname">Hello</p>
10     <p name="pname">Hello</p>
11     <p name="pname">Hello</p>
12     <p name="pname">Hello</p>
13     <a name="pname">Hello</a>
14     <a id="aid" title="获取a标签的属性成功">aaaaaaa</a>
15     <a id="aid2">aid2</a>
16
17     <ul><li>1</li><li>2</li><li>3</li></ul>  <!--设置一个ul节点,包含三个li子节点-->
18
19     <div id="div">
20         <p id="pid">div的p元素</p>  <!--设置一个p节点，它的父节点是div-->
21     </div>
22     <script>
23         //通过名字查找元素查找并修改其内容
24         getName();
25         function getName(){
26             var count = document.getElementsByName("pname");  //计算名为pname的节点一共多少个
27             alert("id=pname的标签个数："+count.length);
28             var p = count[1];
29             p.innerHTML = "World";  //通过下标改变标签的内容
30         }
31
32         //通过id查找并获取节点属性内容
33         getAttr();
34         function getAttr(){
35             var anode = document.getElementById("aid");//获取id=aid的节点
36             var attr = anode.getAttribute("title"); //获取title属性的内容
37             alert(attr);
38         }
39
40         //通过id查找并动态设置标签属性
41         setAttr();
42         function setAttr(){
43             var anode = document.getElementById("aid2");//获取id=aid2的节点
44             anode.setAttribute("title","动态设置a的title属性");//动态设置title属性
45
46             var attr = anode.getAttribute("title");//获取查看title属性的内容，看是否设置成功
47             alert(attr);
48         }
49
50         //通过标签名查找节点并获取子节点个数
51         getChileNode();
52         function getChileNode(){
53             var childnode = document.getElementsByTagName("ul")[0].childNodes;//获取标签名为ul的节点的子节点
54             alert("ul子节点个数："+childnode.length);//计算子节点的个数
55         }
56
57         //通过子节点获取父节点
58         getParentNode();
59         function getParentNode(){
60             var div = document.getElementById("pid");
61             alert(div.parentNode.nodeName);//通过子节点获取父节点
62         }
63
64         //动态添加节点
65         createNode();
66         function createNode(){
67             var body = document.body;
68             var input = document.createElement("input"); //动态添加节点
69             input.type = "button";
70             input.value = "动态添加的按钮";//创建一个按钮
71             body.appendChild(input);
72         }
73
74         //在特定的位置动态添加一个p元素
75         //addNode();
76         function addNode(){
77             var div = document.getElementById("div");
78             var node = document.getElementById("pid");
79             var newnode = document.createElement("p");
80             newnode.innerHTML = "在特定的位置动态添加一个p元素";
81             div.insertBefore(newnode,node);
82         }
83
84         //删除节点
85         removeNode();
86         function removeNode(){
87             var div = document.getElementById("div");
88             var p = div.removeChild(div.childNodes[1]);
89         }
90
91         //网页尺寸
92         getSize();
93         function getSize(){
94             //offsetWidth，offsetHeight获取不包含滚动条的页面宽和高
95             var width = document.documentElement.offsetWidth;
96             var height = document.documentElement.offsetHeight;
97             alert("不包含滚动条的页面宽和高:"+width+","+height);
98
99             //scrollWidth，scrollHeight获取不包含滚动条的页面宽和高
100             var width1 = document.documentElement.scrollWidth;
101             var height1 = document.documentElement.scrollHeight;
102             alert("包含滚动条的页面宽和高:"+width1+","+height1);
103         }
104
105
106     </script>
107 </body>
108 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航