节点操作:访问、属性、创建 (1)节点的访问:firstChild、lastChild、childNodes、parentChild(父子节) 可以使用元素对象的方法进行代替:getElementById()、getElementsByTagName() (2)节点属性的操作:setAttribute()、removeAttribute()、getAttribute() (3)节点的创建、删除、追加: 创建节点:document.createElement(tagName) 删除节点(必须父节点下的子节点才能被删除):parentObj.removeChild(nodeObj) 追加节点:parentObj.appendChild(nodeObj); CSS DOM 核心:就是给一个元素对象,增加样式(外观)。 概述:每一个HTML标记都有一个style属性,它对应元素元素的style属性,该style属性是一个对象。 Style对象有哪些属性:style对象的属性,与CSS中的属性一一对应。 obj.style.border = “1px solid #FF0000” obj.style.width = “400px”; //CSS一定要加单位 obj.style.position = “absolute”; <img id=“img” />是一个HTML标记,它的属性有:src、 width、height、alt、border、style、title等 每一个标记都对应一个元素对象,元素对象的属性与标记的属性一模一样。 var obj = document.getElementById(“img”); obj.src = “images/bg.gif”; obj.width = 400; obj.border = 1; obj.style = “padding:20px;” CSS属性与style对象的属性的转换问题 (1)如果是一个单词的属性,CSS与style属性一模一样;如:obj.style.width = “400px” (2)如果是多个单词的属性,转成style对象属性时,转换规则是:第一个单词全小写,后面的单词首字母大写,并且去掉中间的连接线(-) 举例: background-color 转换后 obj.style.backgroundColor = “#FF0000” font-size 转换后 obj.style.fontSize = “18px” //获取id=box的对象 var obj = document.getElementById("box"); //给id=box的对象增加样式 obj.style.width = "400px"; obj.style.height = "300px"; obj.style.border = "2px dotted #ccc"; obj.style.backgroundColor = "#f0f0f0"; obj.style.margin = "50px auto"; obj.style.fontSize = "24px"; obj.style.color = "#FF0000"; HTML DOM 一、HTML DOM的特性 (1)每一个HTML标记,都对应一个元素对象。每个标记,都是一个对象,是一个节点。例如:<img>对应一个img对象,一个<table>标记,对应一个table对象,一个<form>标记,对就form对象等。 (2)HTML标记的属性,与元素对象的属性一模一样。 <img>标记属性:src、width、border、height等 imgObj.src = “images/bg.gfi”; imgObj.width = 400; imgObj.height = 300; imgObj.border = 2; 二、访问HTML元素的方法总结 1、通过document对象的getElementById()方法来访问,返回一个对象 <div id=”box”></div> var obj = document.getElementById(“box”); //获取对象 var img = document.createElement(“img”); // 创建节点 img.src = “images/img01.jpg”; //使用元素对象的属性 img.border = 2; img.style.padding = “10px”; //使用style对象来增加样式 img.style.float = “left”; obj.appendChild(img); //将img节点,追加到id=box中去 2、通过父元素的getElementsByTagName()方法来访问,返回一个数组对象 语法结构:var arrObj = document.getElementsByTagName(“li”) 功能描述:取得标记为<li>的一个数组(标记列表)。 举例:取得一个<ul>标记中的所有的<li>标记 //获取id=ul的对象 var ulObj = document.getElementById("ul"); //取得所有的li对象的一个数组 var arrLi = ulObj.getElementsByTagName("li"); //修改第二个和第四个li的样式 arrLi[1].style = "font-size:24px;color:#ff0000;"; arrLi[3].style.textDecoration = "underline"; 3、通过name属性来访问(一般用于表单元素) onsubmit事件:当单击“提交按钮”时,发生的事件。事件的返回值,直接决定默认动作的执行。 onsubmit的返回值,如果为true或空,则表单提交;如果为false,则阻止表单提交。 <form name="form1" action="login.php" method="post" onsubmit="return checkForm()"> 用户名:<input type="text" name="username" /> 密码:<input type="password" name="password" /> <input type="submit" value="提交表单" /> </form> <script type="text/javascript"> function checkForm() { //取到表单中各元素 if(document.form1.username.value == "") { window.alert("用户名不能为空"); return false; }else if(document.form1.password.value.length == 0) { window.alert("密码不能为空"); return false; }else { return true; } }
时间: 2024-10-16 21:24:48