DOM操作（二）

DOM操作（二）

  1. 获取自定义属性的值

    <ul>
	<li score="100">某人的成绩</li>
	<li score="100">某人的成绩</li>
</ul>
<script>s
var list=document.getElmentsByTagName("li");
for(var i=0;i<list.length;i++){
    list[i].onclick=function(){
        alert(this.getAttribute(score));//score是自定义属性,所以要使用getAttribute()来获取
    }
}
</script>

  2. 获取系统属性的值

    <input type="text" id="input">
<script>
console.log(document.getElementById("input").type);//直接获取
</script>

  3. 设置自定义属性的值

    同理，使用setAttribute("属性的名字","值");

  4. 设置系统属性的值

    同上，直接获取
    • 为元素新增一个类，用

    Element.className="类名称"

  5. 移除自定义和自带属性的值s

    removeAttribute("属性的名字");

获取节点和元素的12行代码（重点）

  1. 基础知识

    节点:元素（标签），属性，文本

    类型 元素 属性 文本
    nodeType 1 2 3
    nodeValue null 属性值 文本内容
    nodeName 大写的元素名称 属性名称 文本内容
    级别 节点 元素(标签)
    父级 parentNode parentElement
    子级 childNodes children
    第一个子级 firstChild firstElementChild
    最后一个子级 lastChild lastElementChild
    前一个兄弟节点 previousSibling previousElementSibling
    后一个兄弟节点 nextSibling nextElementSibling

元素创建的三种方法

1.document.write("标签的代码及内容");
2.对象.innerHTML="标签以及代码";
3.document.createElement("标签的名字");

  • document.write

    缺点：若在页面加载后才起作用，那么此方法运行之后会完全覆盖之前的内容，刷新整个文档

    <p>这是之前的文档</p>
<input type="button">
<script>
    document.getElementsByTagName("input")[0].onclick=function(){
    document.write("<p>这是一个新的文档</p>");
}    
</script>

  • innerHTML

    也是起覆盖作用，但是与document.write不同的是，可以选择任意的对象,即对象.innerHTML

  • document.createElement

    一般与追加元素的方法appendChild连用

    <!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
    div {
        width: 400px;
        height: 600px;
        border: 1px dashed pink;
    }
    </style>
</head>

<body>
    <input type="button" value="创建" id="bt">
    <div id="bd"></div>
    <script src="common.js"></script>
    <script>
    my$("bt").onclick = function() {
        //创建元素
        var pobj = document.createElement("p");
        setElement(pobj, "这是创建的元素");
        //pobj.innerText="HAHAH";
        //追加元素
        my$("bd").appendChild(pobj);
    }
    </script>
</body>

</html>

    其他方法

    insertBefore(添加的元素，目标元素);//在一个元素之前添加新元素
replaceChild(目标元素);//替换元素
removeChild(目标元素);//移除元素

    为同一个元素添加多个事件

    <!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input type="button" value="点击" id="btn">
	<script src="common.js"></script>
	<script>
		//方法一：使用addEventListener()方法，参数1:事件类型(string),不加"on",参数2:执行函数,事件3：false----谷歌和火狐用
		my$("btn").addEventListener("click",function(){
			console.log("反复调用");
		},false)
		my$("btn").addEventListener("click",function(){
			console.log("反复调用");
		},false)
		my$("btn").addEventListener("click",function(){
			console.log("反复调用");
		},false)

		//方法二：attachEvent();参数一:事件类型(string),加"on",参数2：执行函数	-----------IE8专用,现在已经被废弃

		my$("btn").attachEvent("onclick",function(){
			console.log("再次调用")
		})
		my$("btn").attachEvent("onclick",function(){
			console.log("再次调用")
		})
		my$("btn").attachEvent("onclick",function(){
			console.log("再次调用")
		})

	</script>
</body>
</html>

    • 将上述过程封装成一个函数

      //为任意元素，绑定任意事件
function addEventListener(element,type,fn){//这里type不用加on
	//判断浏览器是否支持这个方法
	if(element.addEventListener){
		element.addEventListener(type,fn,false);
	}else if(element.attachEvent){
		element.attachEvent("on"+type,fn);
	}else{
		element["on"+type]=fn;//上述两个方法都不支持的情况下，用最原始的方法
	}
}

posted on 2018-09-14 22:47  xiao545  阅读(156)  评论(0)  编辑  收藏  举报

导航