javascript中DOM基础知识介绍
1.1. 基本概念
1.1.1. DOM
DOM Document Object Model 文档对象模型
就是把HTML文档模型化,当作对象来处理
DOM提供的一系列属性和方法可以视作一个工具箱,极大地方便了我们对文档的处理。
1.1.2. 内容概念
文档(Document):就是指HTML或者XML文件
节点(Node):HTML文档中的所有内容都可以称之为节点,常见的节点有
元素节点 属性节点 文本节点 注释节点
元素(Element):HTML文档中的标签可以称为元素
1.1.3. 结构概念
父节点 当前节点的父级
子节点 当前节点的子级
兄弟节点 和当前节点同属一个父级的节点
1.2. 获取元素
getElementById
通过id寻找一个元素(找到的是一个元素对象) 该方法只能被document对象调用(同一个文档中id不能重复)
getElementsByTagName
通过标签名寻找一类元素(找到的是由元素对象组成的伪数组)
即可以被document调用,又可以被元素对象调用,被元素对象调用时表示在该元素对象内部执行查找
1.3. 设置属性
元素对象.属性名 = “属性值”;
等价于
<标签 属性名=”属性值”>
1.4. 绑定事件
事件三要素
事件源.事件 = function(){ 事件处理程序 };
等价于
<标签 事件=”事件处理程序”>
和对象方法一样,this指的还是调用该方法的对象
1.5. 常用属性
1.5.1. 常用标签属性
DOM对象的属性和HTML的标签属性几乎是一致的,常用的有src、title、className、href和style
其中className对应就是标签的class属性,但是由于class在JS中是关键字,所以变成了className
1.5.2. 内部文本属性
innerHTML
获取和设置标签中的内容,设置的内容会当作节点对象被解析到DOM树上
innerText
获取和设置标签中的内容,设置的内容会被当作普通文本(有兼容性问题,旧版ff不支持)
textContent
获取和设置标签中的内容,设置的内容会被当作普通文本(有兼容性问题,旧版IE不支持)
可以通过能力检测封装一个自己的设置内部文本的方法并放到自己的JS工具包中
1.5.3. 常用表单属性
常见的表单元素属性有: type、value、checked、selected、disabled
type可以设置input元素的类型
value可以设置input元素的值
checked可以设置input元素是否选中
selected 可以设置下拉列表select中的option是否被选中
disabled 可以设置input元素是否被禁用
文本框获取焦点和失去焦点
获取焦点事件是onfocus 失去焦点事件是onblur (不是所有的标签都有这个事件) 更多详细内容可以查阅w3School
1.5.4. 自定义属性
对象的自定义属性
可以像给对象设置属性一样,给元素对象设置属性
标签的自定义属性
可以通过getAttribute()和setAttribute()设置和获取标签属性,通过removeAttribute()移除标签的属性
正常浏览器中 HTML中有规定的属性 两种方式才可以相互设置和获取
总之用setAttribute设置的就用getAttribute获取 用对象的自定义属性设置的就用对象的自定义属性获取 以免出问题
1.6. 节点
1.6.1. 节点类型
node.nodeType
1表示元素节点 2表示属性节点 3表示文本节点
1.6.2. 节点层次
childNodes //子节点
children //子元素 虽然不是
nextSibling //下一个兄弟节点
nextElementSibling //下一个兄弟元素 有兼容性问题 可以封装一个兼容性方法
previousSibling//上一个兄弟节点
nextElementSibling //下一个兄弟元素 有兼容性问题 可以封装一个兼容性方法
firstChild //第一个节点
firstElementChild //第一个子元素 有兼容性问题 可以封装一个兼容性方法
1.7. 样式属性
style属性是对象,style对象的属性是字符串
style只能获取和设置行内样式
DOM对象中style的属性和标签中style内的值几乎一样
只是带有 - 的属性名较为特殊(如background-color变成了backgroundColor),因为在JS中 - 不能作为标识符
1.8. 动态创建元素
1.8.1. 创建节点
方式一:直接在文档中书写
document.write(“内容”)
方式二:改变元素对象内部的HTML
innerHTML=”内容”
方式三:创建或克隆节点并追加
createElement()
cloneNode()
appendChild()
javascript中DOM基础知识介绍的更多相关文章
- day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- HTML中DOM核心知识有哪些(带实例超详解)
HTML中DOM核心知识有哪些(带实例超详解) 一.总结: 1.先取html元素,然后再对他进行操作,取的话可以getElementById等 2.操作的话,可以是innerHtml,value等等 ...
- Nginx基础知识介绍
Nginx基础知识介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Nginx概述 Nginx是免费的.开源的.高性能的HTTP和正向/反向代理服务器.邮件代理服务器.以及T ...
- TCP_Wrappers基础知识介绍
1. TCP_Wrappers基础知识介绍 TCP_Wrappers是在 Solaris, HP_UX以及 Linux中广泛流行的免费软件.它被设计为一个介于外来服务请求和系统服务回应的中间处理软件. ...
- Swift Playgrounds for mac基础知识介绍
Swift Playgrounds是一款适用于iPad和Mac的革命性应用程序,它使Swift学习变得互动而有趣.它不需要编码知识,因此非常适合刚开始的学生.使用Swift解决难题,以掌握基本知识.S ...
- 第76节:Java中的基础知识
第76节:Java中的基础知识 设置环境,安装操作系统,安装备份,就是镜像,jdk配置环境,eclipse下载解压即可使用,下载tomcat 折佣动态代理解决网站的字符集编码问题 使用request. ...
- javascript之正则表达式基础知识小结
javascript之正则表达式基础知识小结,对于学习正则表达式的朋友是个不错的基础入门资料. 元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要 ...
- JavaScript中的基础测试题
Java ...
随机推荐
- wp7图片上传服务器
做一个wp7手机上传图片到服务器的功能,具体丝路是在手机端做一个照相或者选择图片的功能,点击上传,在服务器端做一个一般处理程序,接受上传的文件,存入文件夹,下面是主要代码: 手机端代码: /// &l ...
- Xcode8 NSLog打印json不完整的解决方案
解决方案:自定义宏,通过fprintf函数打印log,完美解决! #ifdef DEBUG #define NSLog(FORMAT, ...) fprintf(stderr, "%s:%z ...
- 01-初学总结之《谭浩强C程序设计》
注:个人针对于课本的易错点进行了相关的整理.整理的不专业,多多见谅. C语言中的易出错的点 这个笔记综合了 0. 常量&变量 常量 整型常量 -345,1000,0 实型常量 1) 十进制 ...
- 创建一个dynamics CRM workflow (一) - Introduction to Custom Workflows
Workflow: Use this process to model and automate real world business processes. These processes can ...
- 前端手机验证码cookie存储
注册的时候经常会有手机验证码的输入这个环节,在第一次点击发送了验证码只后,比如倒计时只走了10秒钟,然后刷新的话,倒计时要还是存在的,这个时候就要有一个cookie的存在了. html的代码 < ...
- iOS 小知识
iOS 各版本: http://www.pig66.com/2018/145_1021/17357553.html
- 素数(Prime)
素数的判断: #include<math.h> bool IsPrime(int n) { ) return false; int sqr = (int)sqrt(1.0*n); ; i& ...
- nyoj312-20岁生日
20岁生日 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 路过这的20岁生日就要到了,他当然很开心,可是他突然想到一个问题,是不是每个人从出生开始,到达20岁生日时所经 ...
- Linux学习二:基于CentOS 6.5的网络配置
查看网卡信息: ifconfig [root@hadoop01 ~]# ifconfig [正常的显示信息] eth0 Link encap:Ethernet HWaddr :0C::::5C ine ...
- Spring框架的理解
Spring 是一個开源的IOC和AOP容器框架! 具体描述为: 1.轻量级:Spring是非侵入性-基于Spring开发的应用中的对象可以不依赖API开发 2.依赖注入(DI---------dep ...