DOM

DOM

一个文档对象模型
visibility=hidden/visible属性:隐藏或显示
document.getElementsByClassName('a') 凡是有个getElements的返回的是集合,要遍历或加下标才能锁定你想要的那个对象,
innerHtml属性:修改内容

debugger

在你想要打断点的位置写上debugger;,就可以在前端调试了,要打开浏览器的开发者模式

this

this是传递当前对象进去

		function change(obj) {
            obj.innerHTML = '情人节快乐';
        }

	<div onclick="change(this)">拼搏到无能为力</div>
    <div onclick="change(this)">坚持到感动自己</div>

onload

		//页面加载完毕后,再调用执行onload方法
        onload = function () {
            var div = document.getElementById("div");
            alert(div);
        }

onkeyup

onkeyup监听键盘录入事件

			input.onkeyup = function () {
                //3.把内容转换成大写字母
                input.value = input.value.toUpperCase();
            }

onmouseover & onmouseout

			//onmouseover:获取鼠标移入事件
            //onmouseout:获取鼠标移出事件
            input1.onmouseover = function () {
                input1.value = '否';
                input2.value = '是';
            }
            input1.onmouseout = function () {
                input1.value = '是';
                input2.value = '否';
            }

onfocus & onblur

		onload = function () {
            //1.获取对象
            var eMail = document.getElementById('eMail');
            //onfocus:获取焦点事件
            //onblur:失去焦点事件
            eMail.onfocus = function () {
                if(eMail.value == "请输入邮箱地址"){
                    eMail.value = "";
                }

            }
            eMail.onblur = function () {
                if(eMail.value == "") {
                    eMail.value = "请输入邮箱地址";
                }
            }
        }

邮箱注册:<input type="text" value="请输入邮箱地址" id="eMail"/>

添加节点

通过属性添加

pElement.innerHTML = "狗粮";

通过方法添加

				var textNode = document.createTextNode('不吃!');
                //6.把内容对象添加到p标签中
                pElement.appendChild(textNode);
                //7.把新的p标签添加到div对象中
                div.appendChild(pElement);

添加图片

			//1.获取input对象
            var input = document.getElementById("input");
            //2.添加点击事件
            input.onclick = function () {
                //1.获取div对象
                var div = document.getElementById("parent");   
                //2.创建img的元素节点
                var imgElement = document.createElement("img");
                //3.给新的元素节点添加属性
                imgElement.src = "../img/f.jpg";
                imgElement.width = 100;
                imgElement.height = 100;
                //4.把新的元素节点添加到div对象中
                div.appendChild(imgElement);
            }

上面的.width=100给节点添加属性不能加px,加了就不起作用了

克隆元素添加

如果图片的宽高是百分比的话只能用克隆,是100px这种的话就可以用上面的方法添加

			//1.获取input对象
            var input = document.getElementById("input");
            //2.添加点击事件
            input.onclick = function () {
                //3.获取div对象
                var div = document.getElementById("parent");
                //4.获取需要克隆的对象
                var img = document.getElementsByTagName('img')[0];
                //5.通过对象调用克隆方法返回新的对象
                var newImg = img.cloneNode();
                //6.把新的节点对象添加到div中
                div.appendChild(newImg);

            }

cloneNode()
参数默认为false:只克隆标签本身,不克隆内容
为true则全部克隆

删除节点

remove():直接删除自己

		function removeLine(e) {
            e.parentElement.parentElement.remove();
        }

<table cellspacing="0" border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td><a onclick="removeLine(this)" href="#">删除整行</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td><a onclick="removeLine(this)" href="#">删除整行</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td><a onclick="removeLine(this)" href="#">删除整行</a></td>
    </tr>
</table>

removeChild():用父节点删除子节点

计算器

二级联动

表单校验

onsubmit