JS 进阶教程

最新推荐文章于 2024-08-26 15:30:34 发布

stanwuc

最新推荐文章于 2024-08-26 15:30:34 发布

阅读量4.8k

点赞数 18

分类专栏： Web前端

本文链接：https://blog.csdn.net/stanwuc/article/details/84976224

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

#JS DOM

1、dom导航

节点对象的一些属性
- nodeName
  - nodeName 是只读的
  - 元素节点的 nodeName 等同于标签名
  - 属性节点的 nodeName 是属性名称
  - 文本节点的 nodeName 总是 #text
  - 文档节点的 nodeName 总是 #document
- nodeValue
  - 元素节点的 nodeValue 是 undefined
  - 文本节点的 nodeValue 是文本文本
  - 属性节点的 nodeValue 是属性值
- nodeType：具体的值是数字，每个数字代表不同的节点类型

关于nodeList和HTMLCollection

HTMLCollection是 HTML 元素的集合
NodeList 是文档节点的集合
都是类数组，都有 length 属性和索引

2、属性操作

基本方法：obj.value（不可以传参）和 obj["value"]（可以传参）；setAttribute | getAttribute | removeAttribute
相关细节：
- 属性基本 html 怎么写 js 就怎么写，除了 class 外：div.className=" "；
- style 属性无论是增加还是获取都是取行间，行间没有的话，取值的时候取不到；
- style 的优先级高于 className；
- 获取非行间样式的兼容性写法：

function getStyle(obj, attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,null)[attr];
    }
}

document对象的一些属性：cookie、domain、body（对象）、forms（对象集合）

5、表格应用

表格的便捷操作：tHead、tFoot、tBodies、rows、cells；
练习：表格的隔行变色；添加和删除一行；搜索和排序；

6、表单应用（表单验证）

input 添加属性进行输入约束：disabled、required、pattern、max和min
css 伪选择器选择相应约束的元素：disabled、invalid、valid、optional、required
input 约束验证相关方法
- checkValidity() ：input 的数据有效则返回 true
- setCustomValidity() ：设置input元素的 validationMessage（校验提示信息）
input 约束验证相关属性
- validity 包含一系列和input元素的合法性相关的布尔属性
- validationMessage 错误提示信息
- willValidate 是否会进行校验
validity包含的属性：customError、patternMismatch、rangeOverflow、rangeUnderflow、stepMismatch、tooLong、typeMismatch、、valueMissing、valid
注意：以上基于html的约束及其验证在IE浏览器不太好使！！！