javascript基础从小白到高手系列五百六十三:禁用验证

通过指定novalidate 属性可以禁止对表单进行任何验证:

这个值也可以通过JavaScript 属性noValidate 检索或设置,设置为true 表示属性存在,设置为 false 表示属性不存在: document.forms[0].noValidate = true; // 关闭验证 如果一个表单中有多个提交按钮,那么可以给特定的提交按钮添加formnovalidate 属性,指定 通过该按钮无须验证即可提交表单: 在这个例子中,第一个提交按钮会让表单像往常一样验证数据,第二个提交按钮则禁用了验证,可 以直接提交表单。我们也可以使用JavaScript 来设置这个属性: // 关闭验证 document.forms[0].elements["btnNoValidate"].formNoValidate = true; 选择框编程 选择框是使用和元素创建的。为方便交互,HTMLSelectElement 类型在所有 表单字段的公共能力之外又提供了以下属性和方法。  add(newOption, relOption):在relOption 之前向控件中添加新的。  multiple:布尔值,表示是否允许多选,等价于HTML 的multiple 属性。  options:控件中所有元素的HTMLCollection。  remove(index):移除给定位置的选项。  selectedIndex:选中项基于0 的索引值,如果没有选中项则为–1。对于允许多选的列表,始 终是第一个选项的索引。  size:选择框中可见的行数,等价于HTML 的size 属性。 选择框的type 属性可能是"select-one"或"select-multiple",具体取决于multiple 属性 是否存在。当前选中项根据以下规则决定选择框的value 属性。  如果没有选中项,则选择框的值是空字符串。  如果有一个选中项,且其value 属性有值,则选择框的值就是选中项value 属性的值。即使 value 属性的值是空字符串也是如此。  如果有一个选中项,且其value 属性没有指定值,则选择框的值是该项的文本内容。  如果有多个选中项,则选择框的值根据前两条规则取得第一个选中项的值。 来看下面的选择框: Sunnyvale Los Angeles Mountain View China Australia 如果选中这个选择框中的第一项,则字段的值就是"Sunnyvale, CA"。如果文本为"China"的项 被选中,则字段的值是一个空字符串,因为该项的value 属性是空字符串。如果选中最后一项,那么 字段的值是"Australia",因为该元素没有指定value 属性。 每个元素在DOM 中都由一个HTMLOptionElement 对象表示。HTMLOptionElement 类型为方便数据存取添加了以下属性。  index:选项在options 集合中的索引。  label:选项的标签,等价于HTML 的label 属性。  selected:布尔值,表示是否选中了当前选项。把这个属性设置为true 会选中当前选项。  text:选项的文本。  value:选项的值(等价于HTML 的value 属性)。 大多数属性是为了方便存取选项数据。可以使用常规DOM 功能存取这些信息,只是效 率比较低,如下面的例子所示: let selectbox = document.forms[0].elements["location"]; // 不推荐 let text = selectbox.options[0].firstChild.nodeValue; // 选项文本 let value = selectbox.options[0].getAttribute("value"); // 选项值 以上代码使用标准的DOM技术获取了选择框中第一个选项的文本和值。下面再比较一下使用特殊 选项属性的代码: let selectbox = document.forms[0].elements["location"]; // 推荐 let text = selectbox.options[0].text; // 选项文本 let value = selectbox.options[0].value; // 选项值 在操作选项时,最好使用特定于选项的属性,因为这些属性得到了跨浏览器的良好支持。在操作 DOM 节点时,与表单控制实际的交互可能会因浏览器而异。不推荐使用标准DOM 技术修改 元素的文本和值。 最后强调一下,选择框的change 事件与其他表单字段是不一样的。其他表单字段会在自己的值改 变后触发change 事件,然后字段失去焦点。而选择框会在选中一项时立即触发change 事件。
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML DOM(文档对象模型)是一种编程接口,允许程序访问和操作HTML文档中的元素。使用JavaScript来操作HTML DOM可以让网页具有交互性和动态性。 在JavaScript中,可以使用getElementById,getElementsByTagName和getElementsByClassName等方法来获取页面上的元素。例如,通过getElementById("myId")可以获取id为"myId"的元素。 操作元素的属性和内容也很简单,可以使用如下方法: - 修改元素的属性:element.attribute = new value - 访问元素的属性:element.attribute - 修改元素的内容:element.innerHTML = new content - 访问元素的内容:element.innerHTML 通过操作HTML DOM,可以实现各种交互效果和动态效果。例如,可以在点击按钮时显示或隐藏元素,或在输入框中输入文本时实时更新页面内容等。 ### 回答2: HTML DOM是JavaScript操作网页中元素和属性的主要方式之一。在HTML DOM中,文档元素是指HTML页面中所有元素的根节点。文档元素的操作包括获取元素、创建元素、删除元素、修改元素属性等。 获取元素是HTML DOM操作的重要一环。在JavaScript中,可以使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法获得HTML页面中的元素。其中getElementById()方法可以通过元素的ID获取该元素的引用,常用于根据ID修改元素的属性或内容。而getElementsByTagName()方法可以通过标签名获取HTML页面中所有该标签的元素,例如获取所有的h1元素,常用于对整个页面的控制。getElementsByClassName()方法可以通过class属性获取HTML页面中所有具有该class的元素。 创建元素是向HTML页面中添加元素的重要方式。可以使用createElement()方法创建一个新元素,然后使用appendChild()方法将其添加到现有元素中。例如,创建一个新的p元素,并将其添加到body元素中可以使用以下代码: var newPara = document.createElement("p"); var textNode = document.createTextNode("This is a new paragraph."); newPara.appendChild(textNode); document.body.appendChild(newPara); 删除元素也是HTML DOM中的一个常用操作。可以使用removeChild()方法删除现有元素,例如: var parent = document.getElementById("parent-id"); var child = document.getElementById("child-id"); parent.removeChild(child); 修改元素属性是HTML DOM中的另一个核心操作。可以使用setAttribute()方法修改元素的属性值,例如: var element = document.getElementById("my-id"); element.setAttribute("class", "new-class"); 可以通过HTML DOM操作文档元素,实现对页面元素和属性的各种操作。掌握HTML DOM的知识,可以更好地控制和管理HTML页面。 ### 回答3: HTML DOM是JavaScript操作网页元素的主要方式之一,它的核心在于文档对象模型(DOM,Document Object Model),需要熟悉DOM才能灵活操作网页元素。文档元素是HTML页面中的根元素,它是其他所有元素的祖先元素,也是HTML DOM操作的基础。 一、获取元素 在JavaScript中,我们可以通过各种方式来获取文档元素,例如getElementById()、getElementsByTagName()、getElementsByClassName()等。其中,通过id、标签名和类名获取元素是最常用的三种方法。 1. getElementById() 此方法用于获取具有指定id属性的元素,其语法为document.getElementById(id)。id属性在整个HTML文档中应该是唯一的。 示例:获取id为“demo”的元素 ``` var demo = document.getElementById("demo”); ``` 2. getElementsByTagName() 此方法用于获取具有指定标签名的元素,其语法为document.getElementsByTagName(tagname)。 示例:获取所有p元素 ``` var pList = document.getElementsByTagName("p"); ``` 3. getElementsByClassName() 此方法用于获取具有指定类名的元素,其语法为document.getElementsByClassName(classname)。 示例:获取类名为“red”的元素 ``` var redList = document.getElementsByClassName("red"); ``` 二、改变元素 有很多种方法可以改变文档元素的属性和样式,下面列举一些常见的方法: 1. 修改元素的文本内容 我们可以通过innerHTML属性和innerText属性来修改元素的文本内容。 innerHTML属性用于改变元素的HTML内容,其语法为element.innerHTML=new html content; innerText属性用于改变元素的纯文本内容,其语法为element.innerText=new text content; 2. 修改元素的样式 我们可以通过style属性来修改元素的样式,其中style属性包含了元素的所有样式属性。 示例:将id为“demo”的元素背景色改为红色 ``` document.getElementById("demo").style.backgroundColor = "red"; ``` 3. 创建新元素 我们可以使用document.createElement()方法来创建新元素,并通过appendChild()方法将其加入到指定的元素内。 示例:创建一个新的p元素 ``` var newP = document.createElement("p"); ``` 4. 删除元素 我们可以使用parentNode.removeChild()方法来删除指定的元素。 示例:删除id为“demo”的元素 ``` var demo = document.getElementById("demo"); demo.parentNode.removeChild(demo); ``` 三、总结 通过这篇文章的学习,我们了解了HTML DOM的基础知识和基本操作方法,例如获取元素、改变元素的属性和样式以及创建和删除元素等。掌握这些操作方法可以帮助我们更好地操作网页元素,从而实现丰富多彩的网页效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值