Advertisement

JavaScript DOM 学习笔记

阅读量：

文章目录

  • DOM基础

    • DOM的基本概念

      • 相关知识：节点类型的相关知识
      • 方法：获取元素的方法
      • 使用id获取单个元素：通过getElementById()实现快速定位指定元素
      • 根据属性获取多个元素：使用getAttributes()方法返回当前DOM文档中的属性集合体
      • 根据类名获取多个元素：通过getElementsByClassName()方法根据指定类名查找所有匹配的元素实例
      • 根据选择器获取单或多元素：利用querySelector和querySelectorAll方法实现灵活便捷的选择器操作
      • 按名称获取所有元素：通过getElementsByName()方法根据名称查询所有匹配的HTML实体或对象实例
      • 获取文档标题和主体信息：查询当前文档的标题和主体内容信息（document.title 和 document.body）

      • 创建元素

      • 插入元素

        • appendChild()
        • insertBefore()

      • 删除元素

      • 复制元素

      • 替换元素

    • DOM 进阶

      • HTML 属性操作
        • 获取HTML 属性值
        • 设置 HTML 属性值

  • HTML 属性操作

    • 获取属性值

      • 设置属性值

        • 移除属性值
          • 检测属性有无

      • CSS 属性操作

        • 获取 CSS 属性值
        • 设置 CSS 属性值

      • DOM 遍历

        • 查找父元素
        • 查找子元素
        • 查找兄弟元素

      • innerHTML && innerText

Dom 基础

Dom 基本概念

DOM 全称 Document Object Model 模型
DOM 操作，可以简单理解成元素操作

在这里插入图片描述

节点类型

在 JavaScript 编程中，DOM 结构单元共计 12 种类型，在此之中较为常见的是元素结构单元、属性结构单元以及文本结构单元。

节点类型 nodeType 值
元素节点 1
数学节点 2
文本节点 3

需特别注意以下几点：

  • 每个元素都对应一个单独的唯一标识符（node）。
  • 这个node被定义为"element node"（Element Node）。
  • **属性和文本类型的两个特殊子类（subtypes）**分别属于不同的分类体系：
    • 属性类型（attribute type）
    • 文本类型（text type）
  • 它们不具备子项（subnodes），也就是说：
    • 只有element node具备直接连接child nodes的能力
    • 而其他两类node不具备这种能力

获取元素

getElementByld()

从上至下解析该网页，并通过调用window.onload事件导致浏览器在完成该网页的整体解析后才开始处理其内部脚本。

复制代码 
    document.getElementById("id名")  //通过 id 获取元素(单个)
    <script>
    window.onload = function()
    {
        //自己写的代码
    }
    </script>

getElementsByTagName()

复制代码 
    document.getElementsByTagName("标签名") 
    /*
    过标签名获取元素，多个
    document.getElementsByTagName("标签名")
    获取的是整个 HTML 页面中的标签名
    */
复制代码 
    <script>  //getElementsByTagName() 可以操作动态创建的 DOM
    window.onload = function()
    {
        document.body.innerHTML = "<input type='button' value='按钮'/>" + 
        "<input type='button' value='按钮'/><input type='button' value='按钮'/>";
        var obtn = document.getElementsByTagName("input");
        obtn[0].onclick = function()
        {
            alert("表单元素共有:" + obtn.length + "个");
        };
    }
    </script>
    <script>   //getElementByld() 不可以操作动态创建的 DOM
    window.onload = function()
    {
        document.body.innerHTML = "<input id='btn' type='button' value='按钮'/>"+
        "<input id='btn' type='button' value='按钮'/>"+
        "<input id='btn' type='button' value='按钮'/>";
        var obtn = document.getElementById("btn");
        obtn.onclick = function()
        {
            alert("表单元素共有:" + obtn.length + "个");
        };
    }
    </script>

辨析
getElementById() 获取的是一个元素，而 getElementsByTagName() 获取的是多个元素(伪数组)
getElementById() 前面只能接 document，getElementsByTagName() 前面不仅可以接 document，还可以接其余 DOM 对象
getElementById() 不可以操作动态创建的 DOM 元素，而 getElementsByTagName() 可以操作动态创建的 DOM

getElementsByClassName()

getElementsByClassName() 不能动态操作 DOM

复制代码 
    document.getElementsByClassName("类名") //通过类名获取元素

querySelector() && querySelectorAll()

复制代码 
    document.querySelector("选择器"); //选择满足条件的第一个元素
    document.querySelectorAll("选择器"); //选择满足条件的所有元素

对于id 选择器而言，在页面仅包含一个元素的情况下，推荐采用 getElementById() 作为最佳实践，并确保操作高效可靠

getElementsByName()

getElementsByName 表单元素有 name 属性，通过 name 属性获取表单元素

复制代码 
    document.getElementsByName("name名")

getElementsByName 只用于表单元素，一般只用于单选框和复选框

document.title 和 document.body

在一个页面中仅包含一个标题元素和一个主体元素，在JavaScript语言的支持下，默认情况下会为每个页面分配唯一的一个title属性和body属性，并提供两个常用的属性值： document.title 和 document.body。

复制代码 
    <script>
    window.onload = function()
    {
        document.title = "梦想是什么";
        document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西</strong>";
    }
    </script>

创建元素

该段落描述的是一个由JavaScript开发的元素，在此过程中初始状态下该元素在原始HTML文档中并不存在。

该段落描述的是一个由JavaScript开发的元素，在此过程中初始状态下该元素在原始HTML文档中并不存在。

复制代码 
    var e1 = document.createElement("元素名"); //创建元素节点
    var txt = document.createTextNode("文本内容"); //创建文本节点
    e1.appendChild(txt);   //把文本节点插入元素节点中
    e2.appendChild(e1);   //把组装好的元素插入已存在的元素中

动态创建图片

复制代码 
    <script>
    window.onload = function()
    {
        var oimg = document.createElement("img");
        oimg.className = "pic";
        oimg.src = "图片的路径";
        oimg.style.border="1px solid silver";
        document.body.appendChild(oimg);
    }
    </script>

动态创建表单

复制代码 
    <script>
    window.on3;load = function()
    {
        var otable = document.createElement("table");
        for(var i = 0; i < 3; i++)
        {
            var otr = document.createElement("tr");
            for(var j = 0; j < 3; j++)
            {
                var otd = document.createElement("td");
                otr.appendChild(otd);
            }
            otable.appendChild(otr);
        }
        document.body.appendChild(otable);
    }
    </script>

插入元素

appendChild()

appendChild：把一个新元素插入到父元素的内部子元素的末尾

复制代码 
    A.appendChild(B); //A 父元素,B子元素
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				//为按钮添加事件
    				obtn.onclick = function()
    				{
    					var oul = document.getElementById("list");
    					var otxt = document.getElementById("txt");
    					
    					//将文本框内容转化为 "文本结点"
    					var textNode = document.createTextNode(otxt.value);
    					//动态创建一个 li 元素
    					var oli = document.createElement("li");
    					
    					//将文本节点插入 li 元素中去
    					oli.appendChild(textNode);
    					//将 li 元素插入 ul 元素中
    					oul.appendChild(oli);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<ul id = "list">
    			<li>Java</li>
    		</ul>
    		<input id = "txt" type="text" /><input id="btn" type="button" value="插入" />
    	</body>
    </html>

insertBefore()

insertBefore 将一个新元素插入到父亲元素中的某一个元素之前

复制代码 
    A.insertBefore(B, ref); //A父元素,B新的子元素,ref表示指定子元素,在ref之前插入子元素
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				//为按钮添加事件
    				obtn.onclick = function()
    				{
    					var oul = document.getElementById("list");
    					var otxt = document.getElementById("txt");
    					
    					//将文本框内容转化为 "文本结点"
    					var textNode = document.createTextNode(otxt.value);
    					//动态创建一个 li 元素
    					var oli = document.createElement("li");
    					
    					//将文本节点插入 li 元素中去
    					oli.appendChild(textNode);
    					//将 li 元素插入到 ul 的第一个子元素前面
    					oul.insertBefore(oli, oul.firstElementChild);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<ul id = "list">
    			<li>Java</li>
    		</ul>
    		<input id = "txt" type="text" /><input id="btn" type="button" value="插入" />
    	</body>
    </html>

在使用appendChild()与insertBefore()这两种方法进行元素插入时,必须先获取到父节点才能执行相应的操作.

删除元素

removeChild()：删除父元素下的某个子元素

复制代码 
    A.removeChild(B) //A表示父元素,B表示子元素
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				//为按钮添加事件
    				obtn.onclick = function()
    				{
    					var oul = document.getElementById("list");
    					//删除最后一个元素
    					oul.removeChild(oul.lastElementChild);
    					/*
    					删除第一个元素
    					oul.removeChild(oul.firstElementChild);
    					删除列表
    					document.body.removeCild(oul);
    					*/
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<ul id = "list">
    			<li>Java</li>
    		</ul>
    		<input id="btn" type="button" value="删除" />
    	</body>
    </html>

removeChild 方法必须找到被删除的子元素；被删除子元素的父元素

复制元素

复制代码 
    obj.cloneNode(bool)
    /*
    参数 obj 表示被复制的元素，而参数 bool 是一个布尔值，取值如下:
    1 或 true: 表示复制元素本身以及复制该元素下的所有子元素
    0 或 false: 表示仅仅复制元素本身,不复制该元素下的子元素
    */
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				obtn.onclick = function()
    				{
    					var oul = document.getElementById("list");
    					document.body.appendChild(oul.cloneNode(true));
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<ul id = "list">
    			<li>Java</li>
    			<li>JavaScript</li>
    		</ul>
    		<input id="btn" type="button" value="复制"/>
    	</body>
    </html>

替换元素

复制代码 
    A.replaceChild(new, old); //A父元素,new 表示新子元素,old表示旧子元素
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var btn = document.getElementById("btn");
    				btn.onclick = function()
    				{
    					//获取 body 中第一个元素
    					var ofirst = document.querySelector("body *:first-child");
    					
    					//获取二个文本框
    					var otag = document.getElementById("tag");
    					var otxt = document.getElementById("txt");
    					//根据两个文本框创建一个新节点
    					var onewtag = document.createElement(otag.value);
    					var onewtxt = document.createTextNode(otxt.value);
    					
    					onewtag.appendChild(onewtxt);
    					document.body.replaceChild(onewtag,ofirst);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<p>Java</p>
    		<p>JavaScript</p>
    		<hr/>
    		输入标签: <input id="tag" type="text" /><br/>
    		输入内容: <input id="txt" type="text" /><br/>
    		<input id="btn" type="button" value="替换"/>
    	</body>
    </html>

替换元素，必须提供三个节点: 父元素，新元素和旧元素

DOM 进阶

HTML 属性操作

获取HTML 属性值

获取HTML 元素的属性值，一般通过属性名，来找到该属性对应的值

复制代码 
    obj.attr
    /*
    obj 是元素名，是 DOM 的一个对象，即 getElementById()、getElementsByTagName()等方法获取到的元素节点
    attr是属性名，对于对象来说，通过点运算符(.)来获取它的属性值
    */

获取静态 HTML 中的属性值

复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				obtn.onclick = function()
    				{
    					alert(obtn.id);
    				};
    			}
    		</script>
    	</head>
    	<body>
    		<input id="btn" class="myBtn" type="button" value="获取" />
    	</body>
    </html>

获取动态 DOM 中的属性值

复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				//动态创建一个按钮
    				var oinput = document.createElement("input");
    				oinput.id = "submit";
    				oinput.type = "button";
    				oinput.value = "提交";
    				document.body.appendChild(oinput);
    				//为按钮添加事件
    				oinput.onclick = function()
    				{
    					alert(oinput.id);
    				}
    			}
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

获取文本框的值

复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				obtn.onclick = function()
    				{
    					var otxt = document.getElementById("txt");
    					alert(otxt.value);
    				};
    			}
    		</script>
    	</head>
    	<body>
    		<input id="txt" type="text" />
    		<input id="btn" type="button" value="获取" />
    	</body>
    </html>

获取单选框的值

复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				var ofruit = document.getElementsByName("fruit");
    				obtn.onclick = function()
    				{
    					for(var i = 0; i < ofruit.length; i++)
    						if(ofruit[i].checked)
    							alert(ofruit[i].value);
    				};
    			}
    		</script>
    	</head>
    	<body>
    		<div>
    			<label><input type="radio" name="fruit" value="苹果" checked="true"/>苹果</label>
    			<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
    			<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    		</div>
    		<input id="btn" type="button" value="获取"/>
    	</body>
    </html>

获取复选框的值

复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				var ofruit = document.getElementsByName("fruit");
    				obtn.onclick = function()
    				{
    					var str = "";
    					for(var i = 0; i < ofruit.length; i++)
    						if(ofruit[i].checked)
    						    str += ofruit[i].value;
    					alert(str);
    				};
    			}
    		</script>
    	</head>
    	<body>
    		<div>
    			<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
    			<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
    			<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
    		</div>
    		<input id="btn" type="button" value="获取"/>
    	</body>
    </html>

获取下拉菜单的值

复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				var oselect = document.getElementById("select");
    				obtn.onclick = function()
    				{
    					alert(oselect.value);
    				};
    			}
    		</script>
    	</head>
    	<body>
    		<select id="select">
    			<option value="北京">北京</option>
    			<option value="上海">上海</option>
    			<option value="广州">广州</option>
    			<option value="深圳">深圳</option>
    			<option value="杭州">杭州</option>
    		</select>
    		<input id="btn" type="button" value="获取"/>
    	</body>
    </html>

设置 HTML 属性值

复制代码 
    obj.attr="值";

HTML 属性操作

getAttribute()

getAttribute 获取元素的某个属性值

复制代码 
    obj.getAttribute("attr")  //obj 元素名; attr 属性名

setAttribute()

setAttribute 设置元素的某个属性值

复制代码 
    obj.setAttribute("attr", "值");

removeAttribute()

removeAttribute 删除元素的某个属性

复制代码 
    obj.removeAttribute("attr");

hasAttribute()

复制代码 
    obj.hasAttribute("attr")
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    		    .main{color: red; font-weight: bold;}
    		</style>
    		<script>
    		    window.onload = function()
    			{
    				var op = document.getElementsByTagName("p");
    				var obtnadd = document.getElementById("btn_add");
    				var obtnremove = document.getElementById("btn_remove");
    				//添加 class
    				obtnadd.onclick = function(){
    					op[0].className = "main";
    				};
    				//删除 class
    				if(op[0].hasAttribute("class"))
    				{
    				    obtnremove.onclick = function(){
    					    op[0].removeAttribute("class");
    				    };
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<p class="main">Hello World!</p>
    		<input id="btn_add" type="button" value="添加样式" />
    		<input id="btn_remove" type="button" value="删除样式" />
    	</body>
    </html>

CSS 属性操作

获取 CSS 属性值

getComputedStyle()：获取一个 CSS 属性的取值

复制代码 
    getComputedStyle(obj).attr;
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    		    #box{
    				width: 100px;
    				height: 100px;
    				background-color: hotpink;
    			}
    		</style>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				var obox = document.getElementById("box");
    				
    				obtn.onclick = function()
    				{
    					alert(getComputedStyle(obox).backgroundColor);
    				};
    			}
    		</script>
    	</head>
    	<body>
    		<input id="btn" type="button" value="获取颜色" />
    		<div id="box"></div>
    	</body>
    </html>

设置 CSS 属性值

style 对象来设置一个 CSS 属性的值

复制代码 
    obj.style.attr = "值";

obj 是 DOM 对象，attr 表示 CSS 属性名；obj.style.attr 等价于 obj.style[“attr”]

复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    		    #box
    			{
    				width: 100px;
    				height: 100px;
    				background-color: hotpink;
    			}
    		</style>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				var obox = document.getElementById("box");
    				obtn.onclick = function()
    				{
    					//获取 2 个文本框的值(也就是输入的内容)
    					var attr = document.getElementById("attr").value;
    					var val = document.getElementById("val").value;
    					obox.style[attr] = val;
    				};
    			}
    		</script>
    	</head>
    	<body>
    		属性: <input id="attr" type="text" /><br />
    		取值: <input id="val" type="text" /><br />
    		<input id="btn" type="button" value="设置" />
    		<div id="box"></div>
    	</body>
    </html>

cssText 同时设置多个 CSS 属性

复制代码 
    obj.style.cssText="值";
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    		    .oldBox{
    				width: 100px;
    				height: 100px;
    				background-color: hotpink;
    			}
    			.newBox{
    				width: 50px;
    				height: 50px;
    				background-color: lightblue;
    			}
    		</style>
    		<script>
    		    window.onload = function()
    			{
    				var obtn = document.getElementById("btn");
    				var obox = document.getElementById("box");
    				var cnt = 0;
    				obtn.onclick = function()
    				{
    					if(cnt%2 == 0) obox.className = "newBox";
    					else obox.className = "oldBox";
    					++cnt;
    				};
    			}
    		</script>
    	</head>
    	<body>
    		<input id="btn" type="button" value="切换" />
    		<div id="box" class="oldBox"></div>
    	</body>
    </html>

obj.style.attr 只可以获取 style 属性中设置的 CSS 属性，对于内部样式或者外部样式，是没有办法获取的
getComputedStyle() ：获取计算后的样式，就是不管是内部样式还是行内样式，最终获取的是根据 CSS 优先级计算后的结果
obj.style.backgroundColor 中，backgroundColor 其实也是一个变量，变量中是不允许出现中划线，中划线在 JavaScript 中是减号的意思

DOM 遍历

查找父元素

复制代码 
    obj.parentNode
复制代码 
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    		    table{border-collapse: collapse;}
    			table, tr, td {border: 1px solid gray;}
    		</style>
    		<script>
    		    window.onload = function()
    			{
    				var otd = document.getElementsByTagName("td");
    				//遍历每一个 td 元素
    				for(var i = 0; i < otd.length; i++)
    				{
    					//为每一个 td 元素添加点击事件
    					otd[i].onclick = function()
    					{
    						//获取当前 td 的父元素(即 tr)
    						var oParent = this.parentNode;
    						//为当前 td 的父元素添加样式
    						oParent.style.color = "pink";
    						oParent.style.backgroundColor = "red";
    					};
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<table>
    			<caption>考试成绩表</caption>
    			<tr>
    				<td>小明</td>
    				<td>80</td>
    				<td>90</td>
    				<td>88</td>
    			</tr>
    			<tr>
    				<td>小红</td>
    				<td>88</td>
    				<td>90</td>
    				<td>99</td>
    			</tr>
    		</table>
    	</body>
    </html>

查找子元素

childNodes：返回所有子节点信息（包括元素节点和文本内容），一般不用
children：返回所有元素节点信息（不包含文本内容）
firstChild：一般不用
firstElementChild：用于获取第一个子元素节点
lastChild：一般不用
lastElementChild：用于获取最后一个子元素节点

查找兄弟元素

**previousSibling：获取上一层的同级元素
nextSibling：获取下一层的同级元素
previousElementSibling：获取上一层次的同级元素
nextElementSibling：获取下一层次的同级元素

innerHTML && innerText

innerHTML：通过访问并调整一个元素的内容部分来实现
innerText：通过访问并调整一个元素的显示内容来实现

HTML 代码 innerHTML innerText
学习网
 学习网 学习网
学习网
 学习网 学习网
空字符串

全部评论 (0)

还没有任何评论哟~

相关文章推荐

JavaScript DOM 学习笔记

文章目录 Dom基础 Dom基本概念 节点类型 获取元素 getElementByld getElementsByTagName getElementsByClassName querySelecto...

JavaScript学习笔记(第七章—DOM)

JavaScript学习笔记第七章—DOM 1、DOM对象简介 1.1什么事DOM对象 DOMDocumentObjectModel文档对象模型可以完成HTML和XML文档的操作，在JavaScrip...

Python学习笔记：5.2.7 javascript之DOM对象

本文是学习陆老师的《python全栈工程师web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！ 一、课程目标 document对象 dom选择器 dom操作 dom事件 二、详情解...

DOM学习笔记

DOM（文档对象模型，Document文档，Object对象，Model模型） 在开发中的地位和作用 1、解释下面名词 HTMLXHTMLDHTMLXML： HTML：超文本标记语言，专门编写网页内容...

JavaScript 学习笔记（二）JavaScript基础，JavaScript的基本DOM操作（二）

文章目录 JavaScript学习笔记（一）JavaScript基础，JavaScript的基本DOM操作（二） 一、DOM介绍 二、获取元素的方式 1\.根据id名称获取 2\.根据元素类名获取 3...

JavaScript学习笔记（DOM 事件、事件监听器）

JavaScript学习笔记（DOM事件、事件监听器） @TOC方法 外部函数的方式 向相同元素添加多个事件处理程序 能够向相同元素添加不同类型的事件： 向Window对象添加事件处理程序 传递参数 ...

JavaScript学习笔记（二十）DOM动画效果(1)

​functionmoveele,attr,target //1.关闭开启定时器; clearIntervalele.timer; ele.timer=setIntervalfunction //2....

JavaScript DOM 编程艺术学习笔记（一）：静态标记

JavaScriptDOM编程艺术 学习笔记（一）：静态标记 DOM DOM脚本程序设计：涵盖了使用任何一种支持DOMAPI的程序设计语言去处理任何一种标记文档的情况。 DOM是程序设计语言和标记文档...

javascript之dom详细笔记加练习

Dom的笔记 根据id获取 document.getElementByIdid <body <pid=dom根据id获取</p <script varhqu=document.getElementBy...

JavaScript 系列笔记——DOM（贰）

JavaScript系列笔记： JavaScript系列笔记——目录 点击上方链接可查看更多笔记 目录 DOM 1\.DOM简介 2\.获取元素 3\.事件基础 4\.操作元素 5\.节点操作 6\....