总结一下自己脑海里的JavaScript吧(一)--DOM模型
今天是2019年6月25日,闲来无事,写一篇文章来看看自己脑袋里装了多少JavaScript知识!
这儿就第一章:
说起JavaScript,它是什么?后端脚本语言?前端编程语言?还是在网站浏览器上运行的编程语言?我觉的它都算的上是!只能说它更靠近网站吧!
它是给我们HTML、css加上行为,使网站具有自己的思想,自己的计算能力以及自己的行动效果!
今天我想说一说JavaScript里面的DOM模型:
DOM模型全称为“文档对象模型”(Document Object Model)概念:将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容);
DOM模型的最小组成单位叫做节点(node)。文档的树形结构(DOM 树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
接下来我们从节点属性讲起:
1、nodeType
属性返回一个整数值,表示节点的类型。
2、nodeName
属性返回节点的名称。
3、nodeValue
属性返回一个字符串,表示当前节点本身的文本值,该属性可读写。
4、textContent
属性返回当前节点和它的所有后代节点的文本内容。
5、baseURI
属性返回一个字符串,表示当前网页的绝对路径。浏览器根据这个属性,计算网页上的相对路径的 URL。该属性为只读。
6、ownerDocument
属性返回当前节点所在的顶层文档对象,即document
对象。
7、nextSibling
属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点,则返回null
。
8、previousSibling
属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点,则返回null
。
9、parentNode
属性返回当前节点的父节点。对于一个节点来说,它的父节点只可能是三种类型:元素节点(element)、文档节点(document)和文档片段节点(documentfragment)。
10、firstChild
属性返回当前节点的第一个子节点,如果当前节点没有子节点,则返回null
。
11、childNodes
属性返回一个类似数组的对象(NodeList
集合),成员包括当前节点的所有子节点。
12、isConnected
属性返回一个布尔值,表示当前节点是否在文档之中。
最后就是我们节点方法:
1、appendChild
方法接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。该方法的返回值就是插入文档的子节点。
例如:var p = document.createElement('p');
document.body.appendChild(p);
2、hasChildNodes
方法返回一个布尔值,表示当前节点是否有子节点。
3、cloneNode
方法用于克隆一个节点。它接受一个布尔值作为参数,表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。
例如:var cloneUL = document.querySelector('ul').cloneNode(true);
4、
insertBefore
方法用于将某个节点插入父节点内部的指定位置(insertBefore
方法接受两个参数,第一个参数是所要插入的节点newNode
,第二个参数是父节点parentNode
内部的一个子节点referenceNode
。newNode
将插在referenceNode
这个子节点的前面。返回值是插入的新节点newNode
。)。
5、removeChild
方法接受一个子节点作为参数,用于从当前节点移除该子节点。返回值是移除的子节点。
6、replaceChild
方法用于将一个新的节点,替换当前节点的某一个子节点。
差不多就这些吧!好了收工!
总结一下自己脑海里的JavaScript吧(一)--DOM模型的更多相关文章
- 8 张脑图入门 JavaScript - 基础面试不倒
8 张脑图入门 JavaScript - 基础面试不倒 转载请注明出处 第一:JavaScript 的变量 第二:JavaScript 运算符 第三:JavaScript 数组 第四:JavaScri ...
- JavaScript进阶之DOM
文档对象模型DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最 ...
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- JavaScript处理HTML DOM
本来只想好好写一篇博文,最后弄到好像重构一样了,越做越不满意,先这样吧:) HTML DOM - JavaScript处理HTML DOM 获取HTML元素 改变HTML元素 增删HTML元素 添加事 ...
- javascript (十四) dom
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object M ...
- Backbone.js 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构
Backbone.js 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和 自定义事件:集合附有可枚举函数 ...
- javascript系列之DOM(一)
原文:javascript系列之DOM(一) DOM(document object moudle),文档对象模型.它是一个中立于语言的应用程序接口(API),允许程序访问并修改文档的结构,内容和样式 ...
随机推荐
- day02-HTML(2)
一.新知识 1. !+tab html5的标签结构 2. Charset 编码 Ascll Ansi Unicode Gbk Gb2312 Big5 Utf-8 通用字符集 3.关 ...
- spring eureka 启动过程
spring-eureka 在springCloud是类似于 zookeeper的存在,主要负责服务的注册发现. 1 由于是Servlet应用,所以Eureka需要通过servlet的相关监听器 ...
- jzoj6008. 【THUWC2019模拟2019.1.18】Sequence (矩阵加速)
题面 茉优最近研究发现,一个人的想愿能力可以认为是字符串S的一个子串S[l,r],而连接值可以认为是这个子串的本质不同子序列个数.现在她想验证她的结论是否正确,于是她给了你Q个询问,希望你帮她来计算, ...
- IT兄弟连 JavaWeb教程 使用AJAX发送GET请求并获取响应
GET请求用于获取数据,有时候我们需要获取的数据需要通过"查询参数"进行定位,在这种情况下,我们会将查询参数追加到URL的末尾,令服务器解析. 使用Ajax发送GET请求非常简单, ...
- com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_ABORTED: User rejected permissions
原因是连接了两个设备,所以无法启动,关掉一个即可
- 重构之Divergent Change(发散式变化)&Shotgun Surgery (散弹式修改)
5.Divergent Change发散式变化 描述:一个类被锚定了多个变化,当这些变化中的任意一个发生时,就必须对类进行修改. 解释:一个类最好只因一种变化而被修改 操作:你应该找出某特定原因而造成 ...
- 《SQL 进阶教程》 case:在 UPDATE 语句里进行条件分支
1.对当前工资为30万日元以上的员工,降薪10%:2.对当前工资为25万日元以上且不满28万日元的员工,加薪20% update salaries set salary = case when sal ...
- virtualenv模块安装
依赖包管理模块(virtualenv) virtualenv是Python的虚拟环境,可以在同一台PC隔离不同的python开发环境.virtualenv可以创建一个隔离的python环境(沙盒).使 ...
- SocLib的安装
一.soclib的安装 1.安装g++,一般Ubuntu系统都自带了,所以无需安装.后面这两个软件需要提前安装,不然后面执行相关操作是会报错:sudo apt-get install automake ...
- JavaSE---jar文件
1.当一个应用程序开发完成后,大致有3种方式发布: 1.1 使用平台相关的编译器将整个应用编译成平台相关的可执行文件: 1.2 为整个应用编辑一个批处理文件: 1.3 将应用程序制作为一个可执行的ja ...