竞技宝平台JavaScript DOM 学习第七章 表单的恢宏_幼功知识_脚本之家

2019-11-26 16:07栏目:竞技宝竞猜
TAG:

主张要是你有一个在线的CD评级工具。你指望客户查看他们心爱的持有CD。不过你怎么精晓客户平均会翻动多少张呢?你在此个页面上急需加上多少字段呢? 在W3CDOM现身以前那真的是一个难题。假设你放置了7张CD。可是客户很也许只想查看一张,太多大概会吓着顾客,而略带客户想查看自个儿的具有CD,那样就只能每每提交很频仍。那诚然很讨厌。 唯有选用W3C DOM才具让客户决定扭转多少个字段。那几个效果和前面包车型地铁大不类似。 例子 当您点击发送的时候,表单就能把拿到的有所参数以数组的花样发送。那用来检查是还是不是真正的发送到了服务器端。不幸的是,mac版的IE和Safari无法发送。 IE的主题材料 windows下的IE有多个沉痛的标题: 第一个难点是负有变化的单选框都同归属贰个数组,纵然他们的names分化。那样客户就只万幸富有的单选框里面采取三个。也等于说你不可能在变幻莫测的表单里面实用单选框。 有读者说通过innerHTML生成的单选框未有毛病。借使您非要实用单选框的话,你能够试试。 第二个难题是调换的表单通过古板的document.forms不能够访谈:IE没有在数组里面含有他们。那个能够由此给他俩设置ID来缓慢解决。 解释 表单的HTML代码: 复制代码 代码如下:

1、getElementById(id)
经过成分的ID访谈成分,那是DOM二个幼功的拜见页面成分的情势,我们要时时接受它.
举个例子下边包车型大巴事例,我们得以同DIV的ID飞快的走访到它,而不要经过DOM层层遍历,

Rating Excellent Good OK Poor Bad

复制代码 代码如下:

Short review

<body>
<div id='divid'><p>h</p>
Just for testing;
</div>
<div id='divid'>
Just for testing;
</div>
<script>
var div=document.getElementById(‘divid');
alert(div.nodeName);
</script>
</body>

Radio buttons included to test them in Explorer:
Test 1
Test 2

瞩目运用那个函数时黄金年代旦成分的ID不是有一无二的,那么会拿走第贰个符合条件的因素。
在IE6中只要input、checkbox,radio. 等要素name相称钦赐的ID,也会被访谈到
举个例子上边包车型大巴例子中,获得的成分是input:

当真的表单项目在ID为readroot的DIV而且display值为none。这么些DIV是一个模板,客商无法更改。当客商必要更加的多的表单的时候大家就复制这几个模板然后增添在表单之后。我们在一同来的就加载,那样当顾客张开页面包车型地铁时候就能够见到。 那些DIV在表单之外,所以当顾客提交表单的时候,这些模板的情节不会被交付。 ID为writeroot的SPAN是一个标记。新的变化的表单就插入在她的前边。 加多表单项目 下边包车型客车代码能够再需求的时候用来增添表单项目: 复制代码 代码如下: var counter = 0; function moreFields() { counter++; var newFields = document.getElementById.cloneNode; newFields.id = ''; newFields.style.display = 'block'; var new菲尔德 = newFields.childNodes; for (var i=0;i复制代码 代码如下: var counter = 0; 然后是事实上的函数。大家给流速計加1: 复制代码 代码如下: function moreFields() { counter++; 然后复制我们的模板,移除ID,何况把display设置为block。readroot应该是全数文档里面唯生机勃勃的ID,复制模板后应当显得出来让顾客见到。 复制代码 代码如下: var newFields = document.getElementById.cloneNode; newFields.id = ''; newFields.style.display = 'block'; 大家遍历那个拷贝的子成分: 复制代码 代码如下: var newField = newFields.childNodes; for (var i=0;i复制代码 代码如下: var theName = newField[i].name if newField[i].name = theName + counter; } 未来那些拷贝已经策动好插入了。大家把他插入到writeroot以前: 复制代码 代码如下:var insertHere = document.getElementById; insertHere.parentNode.insertBefore; } 然后大家在页面加载的时候就试行三遍,这样客户步向的时候就会来看: 复制代码 代码如下: window.onload = moreFields; 移除表单项 每三个模板的正片都有贰个移除按键: 复制代码 代码如下: 点击这些开关就能够从移除他的父成分。整个生成的表单就都会藏形匿影,并且不会再出新。 翻译地址: 转发请保留以下消息小编:北玉

复制代码 代码如下:

<body>
<input name='divid' type="text"/>
<div id='divid'>
Just for testing;
</div>
<script>
var div=document.getElementById('divid');
alert(div.nodeName);
</script>
</body>

2、getElementsByName(name)
重返名字是name的要素数组,在IE6七月素ID匹配那几个名字的话,那个成分也将包涵在内,何况getElementsByName()仅用于象input,radio,checkbox等成分对象。
象下边例子中georges数组的长短应该是0。

复制代码 代码如下:

<body>
<div name="george">f</div>
<div name="george">f</div>
<script type="text/javascript">
var georges=document.getElementsByName("george");
alert(georges.length);
</script>
</body>

3、getElementsByTagName(tagname)
getElementByTagName能够用来DOCUMENT也能够用成分。getElementsByTagName重回具备钦赐tagname的子成分列表(数组卡塔尔。你能够遍历那一个数组得到每一个单独的子成分。当管理异常的大的DOM结构,使用这种艺术能够非常轻巧的保有减少范围。

复制代码 代码如下:

<html>
<head>
<title></title>
<script>
function start() {
// 得到全部tagName是body的元素(当然每一个页面独有三个卡塔 尔(阿拉伯语:قطر‎
myDocumentElements=document.getElementsByTagName("body");
myBody=myDocumentElements.item(0);
// 得到body子成分种的兼具P成分
myBodyElements=myBody.getElementsByTagName("p");
// 获得第叁个P成分
myP=myBodyElements.item(1);
//突显这么些因素的文件
alert(myP.firstChild.nodeValue);
}
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>

DOM Element 常用方法
1、appendChild(node)
向当前节点目的的扩展节点。日常用来给页面动态的增加内容。
比方下边给div增多贰个文书节点:

复制代码 代码如下:

<div id="test"></div>
<script type="text/javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>

地点的事例中给DIV增添文件,也能够用newdiv.innerHTML=”A new div”达成,
不过innerHTML不属于DOM
2、removeChild(childreference)
移除当前节点的子节点,再次回到被移除的节点。这么些被移除的节点能够被插入document树中别的地点

复制代码 代码如下:

<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
</script>

3、cloneNode(deepBoolean)
复制并再次回到当前节点的复制节点,这些复制获得的节点是三个孤立的节点,不在document树中。复制原来节点的属性值,包涵ID属性,所以在把那一个新节点加到document在此以前,必供给校订ID属性,以便使它保持唯风度翩翩。当然假诺ID的唯大器晚成性不首要能够不做管理。
以此艺术支持一个布尔参数,当deepBoolean设置true时,复制 当前节点的全部子节点,满含该节点内的文书。

复制代码 代码如下:

<p id=”mypara”>11111</p>
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);

4、replaceChild(newChild, oldChild)
把当下节点的三个子节点换到另七个节点
例如:

复制代码 代码如下:

<div id="adiv"><span id="innerspan">span</span></div>
<script type="text/javascript">
var oldel=document.getElementById("innerspan");
var newel=document.createElement("p");
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);
</script>

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:竞技宝平台JavaScript DOM 学习第七章 表单的恢宏_幼功知识_脚本之家