JavaScript基础插曲—获取标签，插入元素，操作样式

Js基础

1：document.write()

这个是动态创建元素内容，利用js。这个可以利用js来创建元素，文本，标签等，document.write()与document.writeln()的区别就在于writeln（）输出内容后，会在源代码中换一行，而write()会紧挨着输出不会有任何换行。这个标签必须随页面一同加载显示。

在一个网页中引用其它网页可以使用js的document.write(html代码)，这样子生成。

2：最基本的dom遍历属性

àdocument.getElementById()

根据元素id获取元素，使用这个，不是集合，是单个的元素。

àdocument.getElementsByName()

但是这个特殊，根据元素的name获取元素,这个放回的是对象数组，和下面获取到的是集合只有上面的获取到的是单个的元素。在表单元素的时候使用最好。

à document.getElementsByTagName()

这个也是获取元素，根据页面上标签的名字获取所有的元素，获取到的是个集合。

Eg:按钮实现里面内容变化

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????var inputs = document.getElementsByTagName(‘input‘);
4. ????????for (var i = 0; i < inputs.length; i++) {
5. ????????????inputs[i].onclick = function () {
6. ????????????????for (var c = 0; c < inputs.length; c++) {
7. ????????????????????if(inputs[c].type=="button") {
8. ????????????????????????inputs[c].value = ‘哈哈哈‘;
9. ????????????????????}
10. ????????????????}
11. ????????????????this.value = ‘呜呜‘;
12. ????????????};
13. ????????}
14. ????};
15. </script>

Eg：利用计时器实现使用说明的等待时间。

1. <script type="text/javascript">
2. ????window.onload = function () {
3. ????????var ss = 4;
4. ????????//这里启动计时器
5. ???????????var time=setInterval(function() {
6. ???????????????var sa = document.getElementById(‘btn1‘);
7. ???????????????if (ss > 0) {
8. ???????????????????sa.value = ‘请稍等几分钟‘ + ss + ‘‘;
9. ???????????????????ss--;
10. ???????????????} else {
11. ???????????????????sa.value = ‘同意‘;
12. ???????????????????sa.disabled = false;
13. ???????????????????clearInterval(time);
14. ???????????????}
15. ???????????}, 1000);
16. ????};
17. </script>

àdocument.createElement(‘标签名‘);

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????document.getElementById(‘btn‘).onclick = function() {
4. ????????????var alink = document.createElement(‘a‘); //动态创建元素
5. ????????????alink.href = ‘http://www.baidu.com‘;
6. ????????????alink.target = ‘_black‘;
7. ????????????alink.innerText = ‘百度‘;
8. ????????????document.getElementById(‘div1‘).appendChild(alink); //将其添加到div中.
9. ?
10. ????????????var btton = document.createElement(‘input‘);
11. ????????????btton.type = ‘text‘;
12. ????????????document.getElementById(‘div1‘).appendChild(btton);
13. ????????};
14. ????};
15. </script>

删除层中元素

1. document.getElementById(‘btn1‘).onclick = function() {
2. ????var sss = document.getElementById(‘div1‘);
3. ????while (sss.firstChild) {
4. ????????sss.removeChild(sss.firstChild);
5. ????}
6. };

***：在程序中需要判断类型，我们可以利用typeof()来得到其变量的类型。

innerText.和innerHTML的区别

这个就是

Eg:往table中添加内容。

下面的dict格式是json的格式，也是一种键值对的形式。

1. <title></title>
2. <script type="text/javascript">
3. ????var dict = {
4. ????????‘百度‘: ‘http://www.baidu.com‘,
5. ????????‘京东‘: ‘http://www.jd.com‘,
6. ????????‘淘宝‘: ‘http://www.taobao.com‘,
7. ????};
8. ????window.onload = function() {
9. ????????document.getElementById(‘btn‘).onclick = function() {
10. ????????????var table = document.createElement(‘table‘);
11. ????????????table.border = ‘1‘;
12. ????????????table.backgroundColor = ‘red‘;
13. ????????????for (var key in dict) {
14. ????????????????var tr = document.createElement(‘tr‘);
15. ????????????????var td1 = document.createElement(‘td‘);
16. ????????????????td1.innerHTML = key;
17. ????????????????var td2 = document.createElement(‘td‘);
18. ????????????????td2.innerHTML = ‘<a href="‘ + dict[key] + ‘">‘ + key + ‘</a>‘;
19. ????????????????tr.appendChild(td1);
20. ????????????????tr.appendChild(td2);
21. ????????????????table.appendChild(tr);
22. ????????????}
23. ????????????document.body.appendChild(table);
24. ????????};
25. ????};
26. </script>

Js操作样式

注意：

修改元素的样式不是设置class属性，而是className属性。class是js中的一个保留字，属性不能使用关键字，保留字就变为了classname。

使用方式，属性名.style，注意这里的属性名可能和css中的名字不一样，我们要注意区分。

1. <script type="text/javascript">
2. ????window.onload = function() {
3. ????????document.getElementById(‘btn‘).onclick = function() {
4. ????????????var div = document.getElementById(‘div‘).style;
5. ????????????div.backgroundColor = ‘red‘;
6. ????????????div.border = ‘1px solid blue‘;
7. ????????????div.width = ‘200px‘;
8. ????????????div.height = ‘400px‘;
9. ????????????div.fontFamily = ‘楷体‘;
10. ????????????div.styleFloat = ‘right‘;
11. ????????};
12. ????????document.getElementById(‘btn1‘).onclick = function() {
13. ????????????document.getElementById(‘div‘).style.display = ‘none‘;
14. ????????};
15. ????};
16. </script>

JavaScript基础插曲—获取标签，插入元素，操作样式

原文：http://www.cnblogs.com/netxiaohui/p/5163905.html