<figure>
<figcaption>这是一群美女</figcaption>
<img src="1.jpg" alt="" width="50">
<img src="2.jpg" alt="" width="50">
<img src="3.jpg" alt="" width="50">
</figure>
<body>
<script>
function AD() {
// var txt = document.getElementById("txt")
// 上方方法与下方方法结果相同，只是不同获取input节点的方法。
var txt = document.forms[0]['txtName']
var userAction = txt.selectionDirection
alert(userAction)
}
</script>
<form>
<input type="text" id="txt" name="txtName">
<input type="button" value="获取用户选择文字方向" onclick="AD()">
</form>
</body>
<body>
<script>
function deleteContents(mode) {
// 创建一个Range对象
var rangeObj = document.createRange()
var demoArea = document.getElementById("demo")
if (mode) { / 如果为true，表示删除整个元素 /
// 选取整个Node
rangeObj.selectNode(demoArea)
rangeObj.deleteContents()
} else { / 如果为false，表示仅删除元素中的内容 /
// 选择Node中的Contents
rangeObj.selectNodeContents(demoArea)
rangeObj.deleteContents()
}
}
</script>
<div id="demo" style="background-color: #f00width: 300pxheight: 300px">这是一个Range方法DEMO</div>
<button onclick="deleteContents(true)">删除整个元素</button>
<button onclick="deleteContents(false)">仅删除元素中的内容</button>
</body>
html5 新增了的表单元素和属性如下：属性：
1、 form属性
在HTML5中表单元素可放在表单之外，通过给该元素添加form属性即可。
2、 formaction属性
HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址
3、formmethod属性
既然对提交按钮有了formaction属性，就相应的有了formmethod属性
4、 placeholder属性
给文本框(text或textarea)处于未输入状态时的一种文字提示
5、autofocus属性
自动获得焦点，一个页面只能有一个控件具有该属性
6、 list属性
HTML5为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框(select)，但允许用户自定义输入，为了避免没有支持该蒜素的浏览器出现错误，我们通常使用CSS设置不显示
6、autocomplete属性
自动完成允许浏览器预测对字段的输入，在HTML5之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。
元素：
HTML5大幅度地增加和改良了input元素的种类
search 与text文本框类似，用于搜索；
tel 与text文本框类似，用于电话；
url 与text文本框类似，用于url格式的地址；
email 与text文本框类似，用于email格式的地址；
number 与text文本框类似，用于数值；
range 只允许输入一段范围内的数值，通过min和max属性来设置范围；
color 颜色文本框，“#000000”格式的文字；
file 文件选择文本框，HTML5中通过multiple属性可以多选；
datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；
output 定义不同类型的输出；
表单验证
自动验证
所谓自动验证，就是通过为元素添加相应的属性来达到验证的要求
1、 required属性
具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示
2、pattern属性
具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示
3、min属性和max属性
它们是值类型和日期类型的input元素专用属性，限制了输入的范围
4、 step属性
控制元素的值增加或减少的步幅，如输入11-100之间的数字，且步幅是5，那么只能输入11、16、21....
显示验证
除了给元素添加属性来自动验证外，在HTML5中，form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法，调用该方法可以进行手动验证，checkValidity方法以boolean的形式返回验证结果。
取消验证
取消表单验证有两个属性：用于form的novalidate和用于submit的formnovalidate：
自定义错误
在HTML5中没经过验证的表单浏览器会有默认的提示，但也提供了通过JavaScript的来设置自定义错误提示信息
增强的页面元素
1、figure元素
figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption
2、details元素
details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法
3 、mark元素
mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果
4、progress元素
可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。
5、 meter元素
定义度量衡
6、改良的ol列表
在HTML5中为ol元素添加了start属性和reversed属性
7、改良的dl列表
dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn
8、 另外还有cite用于表示作者，small用于标识“小型文本”等
首先在HTML元素中添加自定义属性，通过JavaScript进行访问，如果之前有尝试过，会发现，容易忽略标记验证，而HTML5可以为提供在有效的网页内创建并使用自己的元素属性的功能。
一，创建HTML5文件：
如果还没想好要使用哪一个，可以复制下面的代码：
在body中设置自定义元素，在head部分脚本区域利用JavaScript元素进行访问。
二，创建元素：
首先，添加一些简单的内容和自定义属性以及ID等元素，以便能够识别JavaScript示例。
正如所看到的那样，自定义属性的形式为：“data-*”，在“data-”部分设定名称或者选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果想验证网页是否有效可才采用这种方法。
自定义属性允许以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。
三，添加测试按钮
在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：
四，获取属性：
在JavaScript中访问属性最常用的方法是使用“getAttributes”，这也是要做的第一步。在页面的head脚本区域添加以下函数：
这里，为示例增加了alert 值，当然也可以根据自身需求在脚本中添加。
五，获取数据：
可以使用元素数据集来替代DOM “getAttributes”，这或许更有效，尤其是在某种情况下，代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点，此代码与//后面的方法一样可执行相同的进程。
从属性名称开始在数据集中删除“data-”，它仍然包含在HTML中。
请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case形式，即（“data-product-category” 变成“productCategory”)。
六，其他模块、函数
我们已经获取该属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）