你的位置:首页 > Java教程

[Java教程]js 节点 document html css 表单节点操作


js 节点 document html css 表单节点操作

节点操作:访问、属性、创建(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;  }}