你的位置:
首页
>
软件开发 >
Java > js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作
发布时间:2016-01-26 17:00:07
js 节点 document html css 表单节点操作节点操作:访问、属性、创建(1)节点的访问:firstChild、lastChild、childNodes、parentChild(父子节) 可以使用元素对象的方法进行代替:getElementById()、get ...
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; }}
原标题:js 节点 document html css 表单节点操作
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。
App Growing 有米云 :https://www.goluckyvip.com/tag/16049.html
Keith律所:https://www.goluckyvip.com/tag/1605.html
App Store:https://www.goluckyvip.com/tag/16050.html
AppAnnie:https://www.goluckyvip.com/tag/16051.html
Appboxo:https://www.goluckyvip.com/tag/16052.html
appcoach:https://www.goluckyvip.com/tag/16053.html
柳市景点大全 柳市镇旅游景点:https://www.vstour.cn/a/401229.html
游轮停蛇口 蛇囗游轮中心:https://www.vstour.cn/a/401230.html