JavaScript 和 Html 会用到的内容

最新推荐文章于 2025-02-02 22:31:04 发布

原创最新推荐文章于 2025-02-02 22:31:04 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pattern #JavaScript #insertBefore() #required #addEventListener

ssm 同时被 2 个专栏收录

18 篇文章

订阅专栏

javaScript

12 篇文章

订阅专栏

本文介绍如何使用JavaScript的DOM操作在指定元素前后插入新元素，并提供了一个自定义函数insertAfter()的示例。此外，还详细讲解了HTML5表单验证的功能，包括pattern属性、placeholder属性的应用及如何自定义表单验证提示。

JavaScript

1、在指定元素前后插入新元素

元素前

appendChild方法可以在DOM文档流中指定的元素后追加利用 createElement（创建元素，标签内容）方法和 createTextNode（创建文本，标签之间的内容）方法创建的新元素，但是appendChild追加的元素都是子元素，不可以现实我们需要下面说的在指定元素前或后插入新元素的方案。

可以通过 Jquery 添加 https://blog.youkuaiyun.com/Roobert_Chao/article/details/88843957

insertBefore() 方法，可以实现把一个新元素插入到现在元素的前面，与现有元素形成兄弟关系。
认识以下属性：
1、新元素，你想插入的新元素（newElement）
2、目标元素，你想把新元素插入到哪个元素的前面（targetELement）
3、父元素，目标元素的父元素（parentNode）

元素后

JavaScript 没有给我们提供在目标元素后面加入新元素的函数，我们这里可以自己写。

### 自定义在元素后边插入元素
function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else{
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}
### 实现自定义的方法
window.onload = function(){
	var para = document.createElement("p");	//	新建标签元素
	var txt = document.createTextNode("Hello World");	//	文本元素
	var add= document.getElementById("add");	//	获取指定元素
	para.appendChild(txt);		//	元素追加
	insertAfter(para,add);
}

HTML

input 属性

pattern 属性。

pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。pattern 的使用

在这里插入图片描述

正则表达式的运用

placeholder

placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
<input type='text' name='reduce' id='reduce' placeholder='提示内容'/>元 <br>

为 placeholder 添加颜色。

### style.css
<style>
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
</style>

还可以通过 JS 编写内容

<script>
window.function(){
  text.oninvalid=function(){
    text.setCustomValidity("请输入正确格式的手机号码");
  };
}
</script>

required

input 的 validationMessage 和 validity 打印出来是：

validationMessage: ‘请填写此字段。’
patternMismatch: false
valid: false // 当前输入无效
valueMissing: true

自定义 required 的内容（Html5 新增表单事件 oninput,oninvalid及setCustomValidity设置提示信息）。
用户输入的时候使用setCustomValidity(’’)将错误提示设置为空字符串，在输入不合法时用setCustomValidity(‘自定义提示信息’)来替换提示信息
HTML DOM addEventListener() 方法
捕获和冒泡的区别官方示例

### 捕获：从外向里层层捕获
element.addEventListener(event, function, true);
### 冒泡：从里向外层层冒出
element.addEventListener(event, function, false);

上述图片中的内容，
(1) 只要有一个验证方面错误，某个属性就为true，valid值为false。
(2) 只有没有任何验证错误，所有的属性都为false，valid才能为true。
(3) 上述的每个错误在浏览器内部都有一个预定义的错误提示消息。
(4) 所有的错误消息中，浏览器自定义的错误消息优先级高于浏览器预定义的错误消息。
(5) 当前没有自定义错误消息，所以customError : false 。