week03

案例一:在末尾添加节点

第一步:获取到ul标签
第二步:创建li标签
document.createElement("标签名称")方法
第三步:创建文本
document.createTectNode("文本内容")
第四步:把文本添加到li下面
使用appendChild方法
第五步:把li添加到ul末尾
使用 appendChild方法
————————

<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>


<input type="button" value="add" onclick="add1();"/>
<script type="text/javascript">
//在末尾添加节点
function add1() {
//获取到ul标签
var ul1 = document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var tex1 = document.createTextNode("5555");
//把文本加到ul里面
li1.appendChild(tex1);
// 把li加到ul下面
ul1.appendChild(li1);

}
</script>
————————


image.png

元素对象(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对象的属性

————————
<ul>
<li>qqqqq</li>
<li>www</li>
<ul>
<script type="text/javascript">
//得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1/parentNode;
alert(ull.id);
var ull= document.getElementById("ulid");
//获得ul的第一个子节点 id=li1
//得到ul
var li1=ul1.firstChild;
alert(li1.id);
//得到最后一个子节点
var li4=ul1.lastChild;
alert(li4,id);
//获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
alert(li3.nextSibling.id);
alert(li3.previousSibling.id);
————————
*父节点
-ul是li的父节点
-parentNode
-//得到li1
var li1 = document.getElementById("li1);
//得到ul
var ul1 =li1.parentNode;
alert(ul1.id);
*子节点
-li是ul的子节点
-childNodes:得到所有子节点,但是兼容性很差
-firstChild:获取第一个子节点 id=li1
//得到ul
var ull= document.getElementById("ulid");
//第一个子节点
var li1=ul1.firstChild;
alert(li1.id);
-lastChild:获得最后一个子节点
*同辈节点
-li直接关系是同辈节点

  • nextSibling:返回一个给定节点的下一个兄弟节点。
    previousSibling:返回一个给定节点的上一个兄弟节点。
    //获取li的id是li3的上一个和下一个兄弟节点
    var li3 = document.getElementById("li3");
    alert(li3.nextSibling.id);
    alert(li3.previousSibling.id);

5.操作dom树

**appendChild方法
-添加子节点到末尾
-特点:类似于剪贴粘贴的效果
**insertBefore(newNode,oldNode)方法
————————
<div id="div">
<ul id="ulid11">
<li>tom</li>
<li>mary</li>
<li>jack</li>
</ul>
</div>
<div id="div2">

</div>
<input type="button" value="add1" onclick="add11();"/>
<script type="text/javascript">
function add11(){
//得到div2
var div2 = document.getElementById("div2");
//获取ul
var ul11 = document.getElementById("ulid11");
//把ul添加到div2里面
div2.appendChild(ul11);
}
</script>
————————
-在某节点之前插入一个新的节点
-两个参数
*要插入的节点
在谁之前插入
-插入一个节点,节点不存在,创建
1.创建标签
2.创建文本
3.把文本添加到标签下面
————————
<div id="div">
<ul id="ulid21">
<li id="li11">西施</li>
<li id="li12">王昭君</li>
<li id="li13">貂蝉</li>
<li id="li14">杨玉环</li>
</ul>
</div>
<input type="button" value="insert" onclick="insert1();"/>
<script type="text/javascript">
function insert1(){
/

1.获取到li13标签
2.创建li
3.创建文本
4.把文本添加到li下面
5.获取到ul
6.把li添加到ul下面(在<li>貂蝉</li>之前添加<li>董小婉</li>)
*/
//获取li3标签
var li13 = document.getElementById("li13");
//创建li
var li15 = document.createElement("li");
//创建文本
var text15 = document.createTextNode("董小婉");
//把文本添加到li下面 appendChild
li15.appendChild(text15);
//获取到ul
var ul21 = document.getElementById("ulid21");
//在在<li>貂蝉</li>之前添加<li>董小婉</li>
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13);
}
</script>
————————
*removeChild 方法:删除节点
-通过父节点删除,不能自己删除自己
————————
<ul id="ulid31">
<li id="li21">西施</li>
<li id="li22">王昭君</li>
<li id="li23">貂蝉</li>
<li id="li24">杨玉环</li>
<input type="button" value="remove" onclick="remove1();"/>
<script type="text/javascript">
function remove1(){
/

1.获取到li24标签
2.获取父节点ul标签
3.执行删除(通过父节点删除)
*/
//获取li标签
var li24 = document.grtElementById("li24");
//获取父节点
//两种方式 1.通过id获取; 2.通过属性 parentNode获取
var ul31 = document.getElementById("ulid31");
//删除(通过父节点)
ul31.removeChild(li24);
</script>
————————
**repalaceChild(newNode,oldNode) 方法替换节点
-不能自己替换自己,通过父节点替换
-两个参数
** 第一个参数:新的节点(替换成的节点)
*第二个参数:酒店节点(被替换的节点)
————————
<ul id="ulid41">
<li id="li31">紫衫龙王</li>
<li id="li32">白眉鹰王</li>
<li id="li33">金毛狮王</li>
<li id="li34">青翼蝠王</li>
<input type="button" value="replace" onclick="replace1();"/>
<script type="text/javascript">
function replace1(){
/

1.获取到li34
2.创建li
3.创建文本
4.把文本添加到l下边
5.获取ul标签(父节点)
6.执行替换操作(repalaceChild(newNode,oldNode))
*/
//获取li34
var li34 = document.grtElementById("li34");
//创建li35
var li35 = document.grtElementById("li35“);
//创建文本
var text35 = document.createTextNode("张无忌");
//把文本添加到li下面
li35.appendChild(text35);
//获取ul
var ul41 = document.grtElementById("ul41");
//替换节点
ul41.replaceChild(li35,li34);
</script>
————————
*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="<h1>AAAAA</h1>";

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提交
<form>
.......
<input type="snbmit" />
</form>
*使用button提交表单
-代码
//实现提交方式
function form1(){
//获取提交方式
var form1 = document.getElementById("form1");
//设置action
form1.action = "hello.html";
//提交form表单
form.submit();
}
*使用超链接提交
-代码
<a href="hello.html?username=123456">使用超链接提交</a>

*onclick: 鼠标点击事件
onchange:改变内容(一般和select一起使用)
onfocus:得到焦点
onblur:失去焦点

2.xml的简介

*eXtensible Markup Language :可扩张标价型语言
**标记型语言:html是标记型语言
-也是使用标签来操作
**可扩展:
-html里面的标签是固定,每个标签都有特定的含义<h1></h1>
-标签可以自己定义,可以写中文的标签<person> </person> <猫></猫>
*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文件的内容)
**<?xml version="1.0" encoding="gbk"?>
***文档声明必须写在第一行第一列
*属性
-version:xml的版本1.0 (使用) 1.1
-encoding: xml编码 gbk utf-8 iso8859-1(不包含中文)
-standalone:是否需要依赖其他文件 yes/no
*xml的中文乱码问题解决
** 画图分析乱码问题


image.png

** 保存的时候的编码和设置打开时候的编码一致,不会出现乱码
(2)定义元素(标签) (
(3)定义元素(****)
(4)注释(****)
(5)特殊字符(

(6)CDATA区(了解)
(7)PI指令(了解)

5.xml的元素定义

** 标签定义
**标签定义又开始必须要有结束:<person></person>
**标签没有内容,可以在标签内结束; <aa/>
**标签可以嵌套,必须要合理嵌套
***合理嵌套<aa><bb></bb></aa>
***不合理嵌套<aa><bb></aa></bb>
**一个xml中,只有一个跟标签 ,其他标签都是这个标签下面的标签
**在xml中巴空格和换行都当成内容来解析,
****下面这两段代码含义不一样的
*<aa>111111</aa>
*<aa>
111111
</aa>
**xml标签可以是中文
**xml中标签的名称规则
(1)xml代码区分大小写
<p> <P>:这两个标签是不一样的
(2)xml的标签不能以数字和下划线(_)开头
<2a> <_aaa>:这样是不正确的‘
(3)xml标签不能以xml,XML,Xml等开头
<xml> <XML> <Xml>:这些都是不对的
(4)xml的标签不能包含空格和冒号
<a b> <b:c>:这些事不正确的

6.xml中属性的定义

*html是标记型文档,可以有属性
*xml也是标记型文档,可以有属性
*<person id1="aaa" id2="bbb"></person>
**属性定义的要求
(1)一个标签上可以有多个属性
*<person id1="aaa" id2="bbb"></person>
(2)属性名称不能相同
*<person id1="aaa" id1="bbb"></person>:这个是不正确的,不能有两个id1
(3)属性名称和属性值之间使用= ,属性使用引号包起来 (可以是单引号,也可以是双引号)
(4)xml属性的名称规范和元素的名称规范一致

7.xml的注释

*写法
**注意的地方
*****注释不能嵌套
-->
**注释也不能放在第一行,第一行第一列必须放文档声明

8.xml中的特殊字符

*如果想要在xml中现在a<b, 本能正确显示 ,因为吧<当作标签
*如果就要显示,需要对特殊字符<进行转义
** < <
> >

9.CDATA区

*可以解决多个字符都需要转义的操作 if(a<b && b<c && d>f){}
*把这些内容放到CDATA区里面,不需要转义了
**写法
<![CDTAT[ 内容 ]]>
-代码
<![CDTAT[ if(a<b && b<c && d>f){} ]]>
**把特殊字符,当作文本内容,而不是标签🏷

10.PI指令(处理指令)

*可以在xml中设置样式
*写法 : <?xml-stylesheet type="text/css" herf="css的路径 "?>
*设置样式,只能对英文标签名称起作用,对于中文的标签不能起作用
**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文件中写几个 <!ELEMENT>
(2)判断元素是简单元素还是复杂元素
-复杂元素:有子元素的元素
<!ELEMENT 元素名称 (子元素)>
-简单元素:没有子元素
<!ELEMENT 元素名称 (#PCDATA)>
(3)需要在xml文件中导入dtd文件
<!DOCTYPE 根元素名称 SYSTEM "dtd文件的路径">
**打开xml文件使用浏览器打开的,浏览器只负责检验xml语法,不负责效验约束
**如果想要效验xml约束,需要工具(eclipse工具)
**打开eclipse开发工具
**当xml中导入dtd文件之后,比如只能出现name,age,多写了一个a,会提示出错

13.dtd的三种引入方式

(1)引入外部的dtd文件
<!DOCTYPE 根文件名称 SYSTEM "dtd
路径">
(2)使用内部的dtd文件
<!DOCTYPE 根元素名称 [
<!ELEMENT 元素名称 (子元素)>
<!ELEMENT 元素名称 (#PCDATA)>
<!ELEMENT 元素名称 (#PCDATA)>
]>
(3)使用外部文件
<!DOCTYPE 根元素 PUBLIC "DTD名称" "DTD文档的URL">
-后面学到框架 struts2 使用配置文件 使用 外部的dtd文件


image.png

14.使用dtd定义元素

*语法: <!ELEMENT 元素名称 约束>
*简单元素:没有子元素的元素
<!ELEMENT name (#PCDATA)>
*** (#PCDATA):约束name是字符串类型
***EMPTY:元素为空(没有内容)
-<a></a>
***ANY:任意
*复杂元素
<!ELEMENT person (name,age,sex,school)>
-子元素只能出现一次
*<!ELEMENT 元素名称 (子元素)>
*表示子元素出现的次数
+:表示一次或者多次
?:表示零次或者一次
*:表示零次或者多次
*子元素直接使用逗号进行隔开
**表示元素出现的顺序
*子元素直接使用|隔开
**表示元素只能出现其中的任意一个

15.使用dtd定义属性

*语法 <!ATTLIST 元素名称
属性名称 属性类型 属性的约束

*属性类型
-CDATA:字符串
- <!ATTLIST birthday
ID1 CDATA #REQUIRED
>
-枚举:表示只能在一定范围内出现值,但是只能每次出现其中的一个
**红路灯效果
**(aa|bb|cc)
- <!ATTLIST age
ID2 (AA|BB|CC) #REQUIRED
>
-ID:值只能是字母或者下划线开头

  • <!ATTLIST name
    ID3 ID #REQUIRED
    >
    *属性的约束
    -#REQUIRED:属性必须存在
    -#IMPLPED:属性可有可无
    -#FIXED:表示一个固定值 #FIXED "AAA"
    -属性的值必须是设置的这个固定值
    - <!ATTLIST sex
    ID4 CDATA #FIXED "AAA"
    >
    -直接值
    *不写属性,使用直接值
    *写了属性,使用设置那个值
  • <!ATTLIST school
    ID5 CDATA "www"
    >

16.实体的定义

  • 语法 : <!ENTITY 实体名称 "实体的值">
    *** <!ENTITY TEST "HAHAHEHE">
    *** 使用实体 &实体名称;比如 &TEST
    ** 注意
    *定义实体需要写在内部dtd里面,如果写在外面的dtd里面,在某些浏览器下,内容得不到

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<list.grtLength();i++){
                          list.item(i)
                          }

           DocumentBuilderFactory:解析器工厂

***sax:
SAXparser:解析器类
SAXparserFacory:解析器工厂

19.使用jaxp实现查询操作

image.png

1.schema约束

dtd语法:<!ELEMENT 元素名称 约束>
** schema符合xml的语法,xml语句
**一个xml里面可以有多个schema,多个schema使用名称空间区分(类似于java包名)
**dtd里面有PCDATA类型,但是在schema里面可以支持更多的数据类型
***比如 年龄 只能是整数, 在schema里面可以直接定义一个整数类型
***schema语法更加复杂,schema目前不能替代dtd

schema的快速入门

*创建一个schema文件 后缀名是.xsd
**根节点<schema>
*在schema文件里面
**属性 xmlns="http://www.w3.org/2001/XMLSchema"
-表示当前xml文件是一个约束文件
**targetNamespace="http://www.itcast.cn/20151111"
-使用schema约束文件,直接通过这个地址引入约束文件
**elementFormDefault="qualified"
步骤
(1)看xml中有多少个元素
<element>
(2)看简单元素和复杂元素
*如果复杂元素
<complexType>
<sequence>
子元素
</sequence>
</complexType>
(3)简单元素,写在复杂元素的
<element name='person">
<complexType>
<sequence>
<element name="name" type="striing"></element>
<element name="age" type="int"></element>
</sequence>
</complexType>
</element>
(4)在被约束文件里面引入约束文件

image.png

推荐阅读更多精彩内容