案例一:在末尾添加节点
第一步:获取到ul标签
第二步:创建li标签
document.createElement("标签名称")方法
第三步:创建文本
document.createTectNode("文本内容")
第四步:把文本添加到li下面
使用appendChild方法
第五步:把li添加到ul末尾
使用 appendChild方法
————————
- 111
- 222
- 333
- 444
————————
元素对象(element对象)
** 要操作element对象,首先必须要获取到element,
-使用document里面相应的方法获取
**方法
***获取属性里面的值
getAttribute(“属性名称”)
-var input1=document。getElementById(“inputid”);
//alert(input1.value);
alert(input1.getAttribute("value"));
***设置属性里面的值
input.setAttribute("class","haha");
***删除属性
input.removeAttribute("name");
** 不能删除value
***想要获取标签下面的子标签
**使用方法 childNodes,但是这个方法兼容性很差
**使用标签下面子标签的唯一有效办法,使用getElementsByTagName方法
——————————
-var ul11 = document.getElementById("ulid1");
//
//var lis = ul11.childNodes;
//alert(lis.length);
var lis = ul11.getElementsByTagName("li");
alter(lis.length);
——————————
3.node对象
*nodeName
*nodeType
*nodeValue
*使用dom解析html里面的标签,熟悉和文本都封装成对象
*标签节点对应的值
nodeType: 1
nodeName:大写的标签名称 比如SPAN
nodeValue:null
*属性节点对应的值
nodeType: 2
nodeName:属性名称
nodeValue:属性的值
*文本节点对应的值
nodeType: 3
nodeName:#text
nodeValue:文本内容
——————————
var span1 = document.getElememtById("spanid");
alert(span1.nodeType); //1
alert(span1.nodeName); //SPAN
alert(span1.nodeValue); //null
//属性
var id1 = span1.getAttribueNode("id");
alert(span1.nodeType); //2
alert(span1.nodeName); //id
alert(span1.nodeValue); //spanid
//获取文本
var text1 = span1.firstChild;
alert(span1.nodeType); //3
alert(span1.nodeName); //#text
alert(span1.nodeValue); //内容
——————————
4.Node对象的属性
————————
- qqqqq
- www
- 西施
- 王昭君
- 貂蝉
- 杨玉环
- 西施
- 王昭君
- 貂蝉
- 杨玉环
- 紫衫龙王
- 白眉鹰王
- 金毛狮王
- 青翼蝠王
- ID3 ID #REQUIRED
>
*属性的约束
-#REQUIRED:属性必须存在
-#IMPLPED:属性可有可无
-#FIXED:表示一个固定值 #FIXED "AAA"
-属性的值必须是设置的这个固定值
- ID4 CDATA #FIXED "AAA"
>
-直接值
*不写属性,使用直接值
*写了属性,使用设置那个值 - ID5 CDATA "www"
> - 语法 :
***
*** 使用实体 &实体名称;比如 &TEST
** 注意
*定义实体需要写在内部dtd里面,如果写在外面的dtd里面,在某些浏览器下,内容得不到
————————
-在某节点之前插入一个新的节点
-两个参数
*要插入的节点
在谁之前插入
-插入一个节点,节点不存在,创建
1.创建标签
2.创建文本
3.把文本添加到标签下面
————————
————————
*removeChild 方法:删除节点
-通过父节点删除,不能自己删除自己
————————
————————
**repalaceChild(newNode,oldNode) 方法替换节点
-不能自己替换自己,通过父节点替换
-两个参数
** 第一个参数:新的节点(替换成的节点)
*第二个参数:酒店节点(被替换的节点)
————————
————————
*clonNode(Boolean):复制节点
-//把ul列表复制到另外一个div里面
/
1.获取到ul
2.执行复制方法 cloneNode方法复制 true
3.把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
// 获取ul41
var ul41 = document.getElementById("ulid41");
//复制ul41,放在类似剪贴板里面
var ulcopy = ul41.cloneNode(true)
//获取到div‘
var divv= documnet.getElementById("divv");
//把副本放到div里面去
divv.appendChild(ulcopy);
————————
** 操作dom总结
*获取节点使用方法
getElementById():通过节点的id属性,查找对应节点。
getElementByName(): 通过节点的name属性,查找对应节点。
getElementByTagName(): 通过节点名称,查找对应节点。
*插入节点的方法
insertBefore方法:在某个节点前插入
appendChild方法: 在末尾添加,剪贴复制
*删除节点的方法
removeChild方法:通过父类节点删除
*替换节点的方法
replaceChild方法:通过父节点替换
6.innerHTML属性
*这个属性不是dom的组成部分,但是大多浏览器都支持的属性
第一个作用:获取到文本内容
var span1 = document.getElementById("sid");
alert(spand1.innerHTML);
第二个作用:向标签里面设置内容
var div11= document.getElementById("div11");
div11.innerHTML="
AAAAA
";7.动态演示时间
*得到当前时间
var date = new Date();
var d1 = date.taLocaleString();
*需要让页面每一秒获取时间
setInterval方法 定时器
*显示到页面上
每一秒向div里面写一次时间
*使用innerHTML'属性
————————
function getD1(){
//当前时间
var date = new Date();
//格式化
var d1 = date.taLocaleString();
//获取div
var div1 = document.getElementById("times");
div1.innerHTML=d1;
}
//使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);
————————
1.表单提交方式
*使用submit提交
*使用button提交表单
-代码
//实现提交方式
function form1(){
//获取提交方式
var form1 = document.getElementById("form1");
//设置action
form1.action = "hello.html";
//提交form表单
form.submit();
}
*使用超链接提交
-代码
使用超链接提交
*onclick: 鼠标点击事件
onchange:改变内容(一般和select一起使用)
onfocus:得到焦点
onblur:失去焦点
2.xml的简介
*eXtensible Markup Language :可扩张标价型语言
**标记型语言:html是标记型语言
-也是使用标签来操作
**可扩展:
-html里面的标签是固定,每个标签都有特定的含义
-标签可以自己定义,可以写中文的标签
*xml用途
** html适用于显示数据,xml也可以显示数据(不是主要功能)
**xml主要功能,为了存储数据
*xml是w3c组织发布的技术
*xml有两个版本 1.0 1.1
-使用的都是1.0版本 (1.1版本不能向下兼容)
3.xml的应用
*不同的系统之间传输数据
**qq之间数据的传输
**画图分析过程
*用来表示生活中有关系的数据
*经常用在文件配置
*比如现在连接数据库 肯定知道数据库的用户名和密码,数据名称
*如果修改数据库的信息,不需要修改源代码,只要修改配置文件就可以了
4.xml的语法
(1)xml的文档声明(****)
*创建一个文件 后缀名是 .xml
*如果写xml,第一步 必须要有 一个文档声明(写了文档声明之后,表示写xml文件的内容)
**
***文档声明必须写在第一行第一列
*属性
-version:xml的版本1.0 (使用) 1.1
-encoding: xml编码 gbk utf-8 iso8859-1(不包含中文)
-standalone:是否需要依赖其他文件 yes/no
*xml的中文乱码问题解决
** 画图分析乱码问题
** 保存的时候的编码和设置打开时候的编码一致,不会出现乱码
(2)定义元素(标签) ()
(3)定义元素(****)
(4)注释(****)
(5)特殊字符()
(6)CDATA区(了解)
(7)PI指令(了解)
5.xml的元素定义
** 标签定义
**标签定义又开始必须要有结束:
**标签没有内容,可以在标签内结束;
**标签可以嵌套,必须要合理嵌套
***合理嵌套
***不合理嵌套
**一个xml中,只有一个跟标签 ,其他标签都是这个标签下面的标签
**在xml中巴空格和换行都当成内容来解析,
****下面这两段代码含义不一样的
*
*
111111
**xml标签可以是中文
**xml中标签的名称规则
(1)xml代码区分大小写
:这两个标签是不一样的
(2)xml的标签不能以数字和下划线(_)开头
<2a> <_aaa>:这样是不正确的‘
(3)xml标签不能以xml,XML,Xml等开头
(4)xml的标签不能包含空格和冒号
6.xml中属性的定义
*html是标记型文档,可以有属性
*xml也是标记型文档,可以有属性
*
**属性定义的要求
(1)一个标签上可以有多个属性
*
(2)属性名称不能相同
*
(3)属性名称和属性值之间使用= ,属性使用引号包起来 (可以是单引号,也可以是双引号)
(4)xml属性的名称规范和元素的名称规范一致
7.xml的注释
*写法
**注意的地方
*****注释不能嵌套
-->
**注释也不能放在第一行,第一行第一列必须放文档声明
8.xml中的特殊字符
*如果想要在xml中现在a *如果就要显示,需要对特殊字符<进行转义
** < <
> >
9.CDATA区
*可以解决多个字符都需要转义的操作 if(af){}
*把这些内容放到CDATA区里面,不需要转义了
**写法
-代码
f){} ]]>
**把特殊字符,当作文本内容,而不是标签
10.PI指令(处理指令)
*可以在xml中设置样式
*写法 :
*设置样式,只能对英文标签名称起作用,对于中文的标签不能起作用
**xml 语法的总结
所有xml 元素都必须有关闭标签
xml 标签对大小写敏感
xml 必须正确地嵌套顺序
xml 文档必须有根元素(只有一个)
xml‘ 的属性值需加引导
特殊字符必须转义 ----CDATA
xml 中的空格,回车换行会解析时被保留
11.xml的约束
*为什么需要约束?
**比如现在定义一个person的xml文件,只要这个文件里面保存人的信息,比如name age等,但是如果在xml文件中写一个标签<猫 >,发现可以正常显示,因为符合语法规范。但是猫不是人的信息,xml的标签是自定义的,需要技术来规定xml只能出现的元素,这个时候需要约束。
*xml的约束的技术: dtd约束 和 schema约束(看懂)
12.dtd的快速入门
*创建一个文件 后缀名 .dtd
步骤
(1)看xml中有多少个元素,有几个元素,在dtd文件中写几个
(2)判断元素是简单元素还是复杂元素
-复杂元素:有子元素的元素
-简单元素:没有子元素
(3)需要在xml文件中导入dtd文件
**打开xml文件使用浏览器打开的,浏览器只负责检验xml语法,不负责效验约束
**如果想要效验xml约束,需要工具(eclipse工具)
**打开eclipse开发工具
**当xml中导入dtd文件之后,比如只能出现name,age,多写了一个a,会提示出错
13.dtd的三种引入方式
(1)引入外部的dtd文件
(2)使用内部的dtd文件
]>
(3)使用外部文件
-后面学到框架 struts2 使用配置文件 使用 外部的dtd文件
14.使用dtd定义元素
*语法:
*简单元素:没有子元素的元素
*** (#PCDATA):约束name是字符串类型
***EMPTY:元素为空(没有内容)
-
***ANY:任意
*复杂元素
-子元素只能出现一次
*
*表示子元素出现的次数
+:表示一次或者多次
?:表示零次或者一次
*:表示零次或者多次
*子元素直接使用逗号进行隔开
**表示元素出现的顺序
*子元素直接使用|隔开
**表示元素只能出现其中的任意一个
15.使用dtd定义属性
*语法 属性名称 属性类型 属性的约束
*属性类型
-CDATA:字符串
- ID1 CDATA #REQUIRED
>
-枚举:表示只能在一定范围内出现值,但是只能每次出现其中的一个
**红路灯效果
**(aa|bb|cc)
- ID2 (AA|BB|CC) #REQUIRED
>
-ID:值只能是字母或者下划线开头
16.实体的定义
17.xml的解析的简介(写到java代码) (**********************)
*xml是标记型文档
*js使用dom解析标记型文档
-根据html的层级结构,在内存中分配一个树形结构,吧html的标签,属性和文本都封装成对象
-document对象,element对象,属性对象,文本对象,node节点对象
*xml的解析方式(技术):dom 和sax
**画图分析使用dom和sax解析xml过程
***dom解析和sax解析区别:
**dom方式解析
*根据xml的层次结构在内存中分配一个树形结构,把xml的标签,属性和文本都封装成对象
*缺点:如果文件过大,造成内存溢出
*优点:很方便实现增删改操作
**sax方式解析
*采用事件驱动,边读边解析
-从上到下,一行一行的解析,解析到某一个对象,返回对象名称
*缺点:不能实现增删改操作‘
*优点:如果文件过大,不会造成内存溢出,方便实现查询操作
*想要解析xml,首先需要解析器
**不同的公司和组织提供了 针对dom和sax方式的解析器,通过api方式提供
***sun公司提供了针对dom和sax解析器 jaxp
***dom4j组织,针对dom和sax解析器 dom4j (**********实际开发***********)
***jdom组织,针对dom和sax解析器 jdom
18.jaxp的api查看
**jaxp是javase的一部分
**jaxp解析器在jdk的javax.xml.parsers包里面
**四个类:分别是针对dom和sax解析使用的类
***dom:
DocumentBuilder : 解析器类
-这个类之一个抽象类,不能new,
此类的实例可以从 DocumentBuilderFactory.newDocumentBuilder() 方式获取
-一个方法,可以解析xml parse(”xml路径“)返回值是 Document 整个文档
-返回的document是一个接口,父节点是Node,如果document里面找不到想要的方法,到Node里面去找
-在document里面方法
getElementsByTagName(String tagname)
--这个方法可以得到标签
--返回集合 NodeList
createElement(String tagName)
--创建标签
createTextNode(String data)
--创建文本
appendChilld(Node newChild)
--把文本添加到标签下面
removeChild(Node oldChild)
--删除节点
getParentNode()
--获取父节点
NodeList list
--getLength() 得到集合的长度
--item(int index)下标取得具体的值
for(int i=0;i
***sax:
SAXparser:解析器类
SAXparserFacory:解析器工厂
19.使用jaxp实现查询操作
1.schema约束
dtd语法:
** schema符合xml的语法,xml语句
**一个xml里面可以有多个schema,多个schema使用名称空间区分(类似于java包名)
**dtd里面有PCDATA类型,但是在schema里面可以支持更多的数据类型
***比如 年龄 只能是整数, 在schema里面可以直接定义一个整数类型
***schema语法更加复杂,schema目前不能替代dtd
schema的快速入门
*创建一个schema文件 后缀名是.xsd
**根节点
*在schema文件里面
**属性 xmlns="http://www.w3.org/2001/XMLSchema"
-表示当前xml文件是一个约束文件
**targetNamespace="http://www.itcast.cn/20151111"
-使用schema约束文件,直接通过这个地址引入约束文件
**elementFormDefault="qualified"
步骤
(1)看xml中有多少个元素
(2)看简单元素和复杂元素
*如果复杂元素
子元素
(3)简单元素,写在复杂元素的