10. javacript高级程序设计-DOM

1. DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口)

1.1 节点层次

DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记。

1.1.1 Node类型

DOM1中定义了一个Node接口,该接口由DOM中所有的节点类型实现,这个Node接口在JavaScript中作为Node类型实现。

每个节点都有一个nodeType属性,因此所有节点类型都共享着相同的基本属性和方法

每个节点都有一个nodeType属性,用于表明节点的类型,节点类型由在Node类型中定义的下列12个数值常量来表示,任何节点类型比居其一:

l Node.ELEMENT_NODE(1);

l Node.ATTRIBUTE_NODE(2);

l Node.TEXT_NODE(3)

l Node.CDATA_SECTION_NODE(4)

l Node.ENTITY_REFERENCE_NODE(5)

l Node.ENTITY_NODE(6)

l Node.PROCESSING_INSTRUCTION_NODE(7)

l Node.COMMENT_NODE(8)

l Node.DOCUMENT_NODE(9)

l Node.DOCUMENT_TYPE_NODE(10)

l Node.DOCUMENT_FRAGMENT_NDOE(11)

l Node.NOTATION_NODE(12)

(1). 判断节点类型

if(someNode.nodeType == 1){

}                                                 

适用所有浏览器

(2). nodeName 和 nodeValue,可以了解具体信息,这两个属性取决于属性类型

(3). 节点关系:

  1. childNodes对象,NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点
  2. parentNode属性,该属性指向文档树中的父节点
  3. previousSibling:前面的兄弟节点
  4. newSibling:后面的兄弟节点
  5. firstChild:第一个子节点
  6. lastChild:最后一个子节点
  7. ownerDocument,该属性指向表示整个文档的文档节点

(4). appendChild():在节点的末尾添加一个节点

hasChildNodes():是否有子节点

insertBefore():在前面插入节点

replaceChild():替换节点

removeChild():移除节点

cloneNode():复制节点

1.1.2 Document类型

l nodeType的值为9

l nodeName的值为 “#document”

l nodeValue的值为null

l parentNode的值为null

l ownerDocument的值为null

l 其子节点可能是一个DocumentType(最多一个),Element(最多一个),ProcessingInstruction或者Comment

常见属性:

document.body

document.title

document.URL

document.domain

document.referrer

document.getElementById()

document.getElementsByTagName()

document.anchors

document.applets

document.forms

document.images

document.links

1.1.3 Element类型

l nodeType的值为1

l nodeName的值为 元素的签名值

l nodeValue的值为null

l parentNode的值为Document或Element

l 子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection或者EntityReference

一般会存在下列属性:

id,title,lang,dir,className

<div id="id" title="title" lang="lang" dir="dir" class="className"></div>

可以使用getAttribute(),setAttribute()和removeAttribute()来操作属性

Element类型是使用attributes属性的的唯一一个DOM节点类型,表示所有的属性集合。

1.1.4 Text类型

l nodeType的值为3

l nodeName的值为 “#text”

l nodeValue的值为 节点所包含的文本

l parentNode的值为Element

l 没有子节点

l 可以通过nodeValue属性或data属性访问Text节点中的文本

l appendData(text)

l deleteData(offset,count)

l insertData(offset,text)

l replaceData(offset,count,text)

l splitText(offset)

l substringData(offset,count)

1.1.5 Comment

l nodeType的值为8

l nodeName的值为 “#comment”

l nodeValue的值为 注释的内容

l parentNode的值为Element或者Document

l 没有子节点

1.1.6 CDATASection

l nodeType的值为4

l nodeName的值为 “#cdata-section”

l nodeValue的值为 CDATA区域中包含的内容

l parentNode的值为Element或者Document

l 没有子节点

1.1.7 DocumentType

l nodeType的值为10

l nodeName的值为 doctype的名称

l nodeValue的值为 null

l parentNode的值为Document

l 没有子节点

1.1.8 DocumentFragment

l nodeType的值为11

l nodeName的值为 ‘#document-fragment’

l nodeValue的值为null

l parentNode的值为null

l 子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection或者EntityReference

1.1.9 Attr类型

l nodeType的值为2

l nodeName的值为 特性的名称

l nodeValue的值为特性的值

l parentNode的值为null

l 没有子节点

 

1.2 DOM操作技术

1.2.1 动态脚本

      var script = document.createElement('script');

      script.type = "text/javascript";

      script.sec = "io.js";

      document.body.appendChild(script);

1.2.2 动态样式

      var link = document.createElement("link");

      link.rel = "stylesheet";

      link.type = "text/css";

      link.href = "io.css";

      var head = document.getElementsByTagName("head")[0];

      head.appendChild(link);

1.2.3 操作表格

<table>属性和方法

l caption

l tBodies

l tFoot

l tHead

l rows

l createTHead()

l createTFoot()

l createCaption()

l deleteTHead()

l deleteTFoot()

l deleteCaption()

l deleteRow(pos)

l insertRow(pos)

<tbody>属性和方法

l rows

l deleteRow(pos)

l insertRow(pos)

<tr>属性和方法

l cells

l deleteCell(pos)

l insertCell()pos

1.2.4 使用NodeList

由于NodeList是动态的,在迭代NodeList时,使用length属性初始化第二个变量,然后将迭代器与该变量比较

转载于:https://www.cnblogs.com/SLchuck/p/4490723.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/273277.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hdu 5045 Contest(状态压缩DP)

题解&#xff1a;我们使用一个二位数组dp[i][j]记录进行到第i个任务时&#xff0c;人组合为j时的最大和&#xff08;这里的j我们用二进制的每位相应一个人&#xff09;。 详细见代码&#xff1a; #include <iostream> #include <cstdio> #include <cstring> …

mysql001创建数据库

-- 注释&#xff0c;ctrl/ -- 查询所有数据库&#xff1b; show DATABASES; -- 创建数据库; CREATE DATABASE studb; -- 切换数据库; USE studb; -- 删除数据库 DROP DATABASE studb;

mysql002创建表

-- 创建student表 DDL CREATE TABLE stdent( sno int(3), name VARCHAR(55), sex CHAR(2), age int, dtdate date, classname VARCHAR(55), email VARCHAR(55) ) -- 查询表中数据 DQL SELECT * FROM stdent;

oc基础-self关键字的使用

#import <Foundation/Foundation.h>interface Student : NSObject {int _age;char *_name; } - (void) study; - (void) run; (void) play;(void) run; endimplementation Student - (void) study {NSLog("%s在学习",self->_name);[self run];//若在此调用…

mysql003操作表DDL

-- 查询表中数据 DQL 注意在mydb数据库下面 SELECT * FROM stdent; -- 在表中添加一列 DDL -- 新增列 默认添加到最后 ALTER TABLE stdent add score DOUBLE(4,1); -- 新增一列 在表中开头添加 ALTER TABLE stdent add score2 double(5,1) first; -- 在指定列后面添…

Google Guava学习笔记——基础工具类Joiner的使用

Guava 中有一些基础的工具类&#xff0c;如下所列&#xff1a; 1&#xff0c;Joiner 类&#xff1a;根据给定的分隔符把字符串连接到一起。MapJoiner 执行相同的操作&#xff0c;但是针对 Map 的 key 和 value。 2&#xff0c;Splitter 类&#xff1a;与 Joiner 操作相反的类&a…

xampp 无法启动mysql

Error: could not open single-table tablespace file .\test\dr.ibd 在网上搜索到的解决方案都不管用。结果整合了两个解决方案&#xff1a; 删掉xampp/data/ib_logfile0 xampp/data/ib_logfile1 xampp/data/ibdata1 三个文件就好了转载于:https://www.cnblogs.com/fyydnz/p/4…

mysql005约束.列级别

-- 列级约束 -- sno 主键&#xff1a;唯一&#xff0c;不为空&#xff0c;自增 -- name 非空 -- sex 非空&#xff0c;默认值&#xff0c;只有男女 -- age 0-30岁 -- score 非空 -- dtdate 非空 -- classname 非空 -- email唯一 -- 创建表&#xff0c;增加列级约束 …

hdu.1430.魔板(bfs + 康托展开)

魔板 Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 2170 Accepted Submission(s): 455 Problem Description在魔方风靡全球之后不久&#xff0c;Rubik先生发明了它的简化版——魔板。魔板由8个同样大小的方…

mysql006添加外键约束

-- 添加外键 -- 建立主表&#xff0c;班级表 CREATE TABLE class( cno int PRIMARY key auto_increment, cname VARCHAR(55) ) SELECT * FROM class; -- 建立从表&#xff0c;学生表 CREATE table stu( sno int PRIMARY KEY auto_increment, sname VARCHAR(55), sex ch…

Circle-Progress-View

https://github.com/jakob-grabner/Circle-Progress-View 转载于:https://www.cnblogs.com/eustoma/p/4507476.html

python1.学生管理系统

#定义函数界面 def info_print(): print("请选择功能-----------") print("1.添加学员") print("2.删除学员") print("3.修改学员") print("4.查询学员") print("5.显示所有学员") print("6.退出系统"…

初学JSP+Servlet常见的错误

web编程中常见的错误: 一、404(要访问的资源没有找到) 1.web程序有没有部署(将项目到tomcat中) 2.url有没有写错(包括大小写&#xff0c;包括项目有没有重命名) 3.有没有将jsp/html放在WEB-INF 4.如果访问的是servlet,那么看下web.xml中url-pattern中的配置和你写的名字是否一致…

python2.面向对象学生管理系统

main.py(程序主入口) #1.导入管理系统模块 from mangerSystem import * #2.启动管理系统 #保证是当前文件运行才启动管理系统&#xff1a;if -- 创建对象并调用run()方法 if __name__"__main__": student_managerStudentManager() student_manager.run() student…

elasticsearch 删除满足条件的语句_ELK从入门到还未精通(二)——ElasticSearch上篇

大家好&#xff0c;我是泥腿子安尼特&#xff0c;5个月没在李佬都公众号更新文章了。上一篇&#xff0c;大致介绍了作为工具人的我是如何基本使用这一套ELK 系统的。今天就讲讲这个最重要的E——基于Lucene的搜索引擎ElasticSearch(后面简称ES)。最近刚搬家&#xff0c;没想到隔…

mysql004操作表.增删改

-- 查询表中数据 DQL 注意在mydb数据库下面 SELECT * FROM stdent; -- 新增数据 这种写法数据的循序和数据库的字段循序保持一致。 INSERT INTO stdent values (1,"张三","男",25,"2021.1.1","java","123qq.com"); --…

python2.面向对象.学生管理

main.py(程序主入口) #1.导入管理系统模块 from mangerSystem import * #2.启动管理系统 #保证是当前文件运行才启动管理系统&#xff1a;if -- 创建对象并调用run()方法 if __name__"__main__": student_managerStudentManager() student_manager.run() student…

纸板怎么切割光滑_激光切割机大PK!光纤、CO2、YAG,你选谁?!

问&#xff1a;我也是钣金人&#xff0c;怎么加入组织&#xff1f;答&#xff1a;点标题下方蓝字“钣金家园光纤激光切割机之所以能在市场快速站稳脚跟并且逐步替代传统切割工艺&#xff0c;是由于其在各方面独具优势&#xff0c;那么他到底优秀在哪里呢&#xff1f;我们把CO2激…

mysql007.算数运算.别名.去重.排序

-- 创建DEPT表 CREATE TABLE DEPT( DEPTNO int(2) not null, DNAME VARCHAR(14), LOC VARCHAR(13) ); -- 查询DEPT表 SELECT * FROM DEPT; -- 修改表&#xff0c;添加主键 ALTER TABLE DEPT add CONSTRAINT PK_DEPT PRIMARY KEY(DEPTNO); -- 查询表结构。 desc DEPT; …

loadrunner11录制不成功解决方法(收集)

问题一&#xff1a;loadrunner11录制时events为0的解决办法 刚安装好的11.0&#xff0c;系统环境是&#xff1a;WINXPIE8LR11 OR WIN7IE11LR11 1、ie去掉工具—internet选项中->高级—>去掉“启用第三方浏览器扩展”&#xff0c;重启ie后发现还不行&#xff0c;继续&…