获取document元素对象
1.getElementById
通过 document.getElementById('id')
方法可以获取具有 id 属性的元素,如:
<div id="elem"> <p id="text">text</p> </div> <script> let elem = document.getElementById('text'); elem.style.color = 'orange'; </script>
2.querySelectorAll
最常用的方法是:elem.querySelectorALL(css)
,css 是一个 css 选择器:
<body> <div> <ol> <li>a</li> <li>b</li> </ol> <p>b</p> </div> </body> <script> let element = document.querySelectorAll('ol > li:last-child'); element[0].style.color = 'red'; </script>
3.getElementsBy*
有以下三种方法:
getElementsByTagName(tag):查找具有给定标签的元素;
getElementsByClassName(className):返回具有给定 CSS类 的元素;
getElementsByName(name):返回具有 name 属性的元素,不常用。
注意:
不能漏了s
返回值为一个 集合
获取element元素对象
1.getElementByID(id)
通过对元素的document.getElementByID("divid")
,这是DOM一个基础的访问页面元素的方法.如:
<div id="divid">测试</div> <script language="javascript"> var div=document.getElementByID("divid"); alert (div.nodeName); //显示元素名 </script>
如果id在元素中不是唯一的,那么获得的将是第一个ID.
2.getElementsByName(name)
仅用于input radio checkbox
等元素,返回名字为name的元素数组
example:
<div name="george"></div> <input name="george"></div> <script language=javascript> var ge=document.getElementsByName("george"); alert (georges.length); //获取georges个数,对div唔效果 </script>
3.getElementsByTagName(tagname)
返回具有tagname
的元素列表数组.处理大的DOM结构会用到它
xml的基本使用
html语言本身是有一些缺陷的 (1)不能自定义标签 (2)html本身缺少含义 (3)html没有真正的国际化 有一个中间过渡语言,xhtml: html->xhtml->xml
1.XML的出现解决了程序间数据传输的问题:
比如QQ之间的数据传送,用XML格式来传送数据,具有良好的可读性,可维护性
2.XML可以做配置文件
XML文件做配置文件可以说非常普遍,比如我们的Tomcat服务器的server.xml,web.xml。再比如我们的structs中的structs-config.xml文件,和hibernate的hibernate.cfg.xml等等。
3.XML可以充当小型的数据库
XML文件可以做小型数据库,也是不错的选择,我们程序中可能用到一些经常要人工配置的数据,如果放在数据库中读取不合适(因为这会增加维护数据库的工作),则可以考虑直接用XML来做小型数据库。这种方式直接读取文件显然要比读数据库快。比如msn中保存用户聊天记录就是用XML文件。
入门案例:用XML来记录一个班级信息。
<?xml version="1.0" encoding="gb2312"?> <class> <stu id="001"> <name>谢鹏超</name> <sex>男</sex> <age>20</age> </stu> <stu id="002"> <name>xpc</name> <sex>女</sex> <age>21</age> </stu> </class>
4.xml文件的解析
这里只是简单的提一下关于xml文件的解析,如:
package com.xinsi.qi.utils; import org.dom4j.Document; import org.dom4j.Element; import org.dom4j.Node; import org.dom4j.io.SAXReader; import java.io.File; import java.util.List; public class Dom4jXml { public void test(){ try { File inputFile = new File("tomcat/main/web.xml"); SAXReader reader = new SAXReader(); Document document = reader.read(inputFile); System.out.println("Root element :"+document.getRootElement().getName()); Element classElement = document.getRootElement(); List<Node> nodes = document.selectNodes("/class/part[@id='02']"); System.out.println("--------------------"); for (Node node:nodes){ System.out.println("标签名=:"+node.getName()); System.out.println("姓名:"+node.selectSingleNode("name").getText()); System.out.println("年龄:"+node.selectSingleNode("age").getText()); System.out.println("性别:"+node.selectSingleNode("sex").getText()); } } catch (Exception e1) { e1.printStackTrace(); } } }