dom小总结
DOM是W3C的标准,分为3个不同的部分:
核心DOM:针对任何结构化文档的标准模型,XML DOM:针对XML文档的标准模型,HTML DOM:针对HTML文档的标准模型。
HTML DOM中所有事物都是节点:
整个文档是文档节点,HTML元素是元素节点,HTML属性是属性节点,HTML内容是文本节点,注释是注释节点。
DOM的一些方法:
| 方法 | 描述 |
| getElementById() | 返回带有指定ID的元素 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点数组,length获取数组长度 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点数组,length获取数组长度 |
| appendChild() | 加入新节点 parentNode.appendeChild(newNode) |
| removeChild() | 删除指定节点 parentNode.removeChild(theNode) |
| replaceChild() | 替换指定节点 parentNode.replaceChild(newNode,theNode) |
| insertBefore() | 在指定节点前插入新节点 parentNode.insertBefore(newNode,theNode) |
| createAttribute() | 创建属性节点 |
| createElement() | 创建元素节点,var para=document.createElement("p"); |
| createTextNode() | 创建文本节点 |
| getAttribute() | 返回指定的属性值 但是一般这样获取:document.getElementById("p2").style.color |
| setAttribute() | 把指定属性设置或修改为指定的值 node.setAttribute("attribute","value") |
DOM的一些属性:
| 属性 | 描述 |
| parentNode | 返回父节点 xx.parentNode |
| childNodes[i] | 返回第i+1个子节点 |
| attributes[i] | 返回第i+1个属性节点 |
| firstChild | 返回第一个子节点 |
| lastChild | 返回最后一个子节点 |
| nextSibling | 返回下一个兄弟节点 |
| previousSibling | 返回上一个兄弟节点 |
| innerHTML | 获取元素内容 |
| nodeName | 只读,规定节点的名称 |
| 元素节点的nodeName与标签名相同 | |
| 属性节点的nodeName与属性名相同 | |
| 文本节点的nodeName始终是#text | |
| 文档节点的nodeName始终是#document | |
| nodeValue | 规定节点的值 |
| 元素节点的 nodeValue 是 undefined 或 null | |
| 文本节点的 nodeValue 是文本本身 | |
| 属性节点的 nodeValue 是属性值 | |
| nodeType(返回节点类型,只读) | 1:元素,2:属性,3:文本,8:注释,9:文档 |
| onclick | document.getElementById("myBtn").onclick=function(){xx()}; |
| document.documentElement | 访问全部文档,alert(document.documentElement); |
| document.body | 访问body内容 |
| document.head | 访问头部内容 |
dom小总结的更多相关文章
- dom小练习
dom小练习 学习要点 综合运用学过的知识完成几个综合小练习,巩固学过的知识. 阶段小练习8-1:改变网页字体的大小 要求和提示: 要求:当用户选择‘大/中/小’的选项时,页面字体发生相应的变化 阶段 ...
- python: DOM 小实例
一.全选 全部取消 反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...
- JS基础(一)dom小实例
DOM的新增示例 <script language="JavaScript"> window.onload = function(){ //createDocument ...
- jquery VS Dom(小实例单选-多选-反选)
一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码 <!DOCTYPE html> <html l ...
- DOM 小总结
DOM 是什么 文档对象模型,是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树. D: document 当 web 浏览器浏览一个页面的时候,DOM ...
- Js操作DOM小练习_01
1.页面引入jQuery文件和bootstrap文件: 2.贴上代码 <!DOCTYPE html> <html lang="en"> <head&g ...
- 《微信小程序七日谈》- 第一天:人生若只如初见
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...
- JavaScript Dom入门
好像代码太杂了,博客园里跑不起来,单独复制到html中本地测试都是没有问题的. JavaScript JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. J ...
- DOM节点详解
@ 目录 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式: 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动编程 ...
随机推荐
- [编码解码] Base64 编码换行和+号遍空格的处理
Android自身带有Base64加密与解密的包,可以方便地加密密码方便传输. String base64Token = Base64.encodeToString(token.trim().getB ...
- Atomic 升级
Atomic 采用类似github的版本管理, 可以使用以下命令升级 ostree remote add --set=gpg-verify=false atomic20160212 http://. ...
- php干不了的活
服务端除了web请求,还有很多需要长时间运行的任务在后台执行. 哪些事情是其它语言能做,php做不了的? 有人说,php基本不会成为服务端的瓶颈.事实如此吗? 已知问题:即使在web前端,连接数是ph ...
- 主机连不上虚拟机中的Redis的原因分析、以及虚拟机网络配置
1. 网络最好是桥接方式.我之前用的是"网络地址转换(NAT)",导致虚拟机里用命令ifconfig得到的ip是10.0.2.15,好奇怪的感觉,然后在真实机上一直连不上.有的说用 ...
- 汉字转全拼音函数优化方案(SQLServer),值得你看看
函数要求实现功能 select 函数名 ('你好,我是追索') 返回的结果(ni hao , wo shi zhui suo) 解决方案一: 解决方案一 /* 根据汉字获取全拼 1.生成所有读音临时表 ...
- Array对象 识记
1.Array 创建 new Array(); new Array(size); new Array(element0, element1, ..., elementn); 2.Array 对象属性 ...
- haoce修改mysql
修改时长余额 select * from sys_user_product up where up.user_id in(select u.id from sys_user u where login ...
- jquery常用的选择器
jquery用选择器来得到jquery对象,进而进行一些操作. 一.基本选择器 1.id选择器.示例:选择id为one的元素 var $one = $("#one"); 2.类选择 ...
- sqlserver跨数据库与跨服务器使用
sqlserver跨数据库与跨服务器使用 日常数据库编程中经常会遇到需要跨数据库和跨服务器的情况,本文总结解决方法,具体如下: 工具/原料 SQLSERVER 数据库 方法/步骤 跨数据库使用比较 ...
- s14 第4天 关于python3.0编码 函数式编程 装饰器 列表生成式 生成器 内置方法
python3 编码默认为unicode,unicode和utf-8都是默认支持中文的. 如果要python3的编码改为utf-8,则或者在一开始就声明全局使用utf-8 #_*_coding:utf ...