前端系列-DOM树以及DOM常用方法

、什么是DOM树？

当浏览器加载HTML 页面的时候，首先就是DOM结构的计算，计算出来的DOM 结构就是DOM 树（把页面中的HTML标签像树的结构一样，分析出之间的层级结构关系）

DOM树描述了标签与标签之间的关系（节点间的关系），我们只要知道任何一个标签，都可以依据DOM中提供的属性和方法，获取到页面中任意另一个标签或者节点。

2、在JS中获取DOM元素的方法

1）getElementById

a、通过元素的ID获取指定的元素对象，使用的时候都是document.getElementById('')，此处的document是限定了获取元素的范围，我们把它称之为“上下文[context]”；

b、getElementById的上下文只能是document

因为严格意义上每一个页面上的ID是不能重复的，浏览器规定在整个文档中可以获取这个唯一的Id。

如果页面中的Id重复了，我们基于这个方法只能获取到第一个元素，后面相同的ID元素无法获取。

c、在Ie6-7浏览器中，会把表单元素input的name属性值当做id来使用（建议：以后使用表单元素时，不要让name和id的值有冲突）

2）getElementsByTagName

[context].getElementsByTagName——在指定的上下文中，根据标签名获取到一组元素集合（HTMLCollection）

a、获取的元素是一个类数组（不能直接的使用数组中的方法），每一项对应的是一个元素对象（有一些自己的内置属性）

b、它会把当前上下文中，子子孙孙（后代）层级内的标签都获取到（获取的不仅是儿子级的）

c、基于这个方法获取到的永远都是一个集合（不管里面是否有内容，也不管有几项，它是一个容器或者集合），如果想操作集合中具体的某一项，需要基于索引获取到才可以

3）getElementsByClassName

[context].getElementsByClassName’在指定的上下文中，基于元素的样式类名（class=‘xxx‘）获取到一组元素集合. 真实项目中，我们经常是基于样式类给元素设置样式，所以在JS中，我们也会经常基于样式类来获取元素，但是此方法在IE6-8下不兼容。

4）getElementsByName

document.getElementsByName() 它的上下文也只能是document，在整个文档中基于元素的name属性值获取一组节点集合（也是一个类数组）。

在IE浏览器当中（IE9及以下），只对表单元素的name元素起作用（正常来说，我们项目中只会给表单元素设置name，给非表单元素设置name，其实是一个不太符合规范的操作）。

5）querySelector

[context].querySelector()——在指定的上下文中基于选择器（类似于CSS选择器）获取到指定的元素对象（获取的是一个元素，哪怕选择器匹配了多个，我们只获取第一个）

6）querySelectorAll

在querySelector的基础上，我们获取到选择器匹配的所有元素，结果是一个节点集合

querySelector、querySelectorAll都是不兼容IE6-8浏览器的（不考虑兼容的情况下，我们能用byid或者其他方法获取到，也尽量不要用这两个方法，这两个方法性能消耗较大）。

document.querySelectorAll(‘#box’);

document.querySelectorAll(‘.box’);

document.querySelectorAll(‘[name=”hobby”]’);

7）document.head

获取head元素对象

8）document.body

获取body元素对象

9）document.documentElement

获取HTML元素对象

扩展：//=>需求：获取浏览器一屏幕的宽度和高度（兼容所有的浏览器）

document.documentELement.clientWidth || document.body.clientWidth

document.documentELement.clientHeight || document.body.clientHeight

一篇我们学习了如何使用zTree对静态数据进行绑定并显示。但是实际运用中数据都是数据库或者经过计算后得到的，所以这一次我们将上次的Demo改为动态绑定。

数据表如下，其中平pId为0的是根节点

上一次讲过zTree的回调事件中可以有许多函数，那么我们就利用点击节点的回调函数进行动态绑定。但是问题来了，首次加载时网页上并没有节点，那么我们如何实现点击节点加载数据呢？思路是这样的，首次加载时用ajax向后台发送一个空请求，点击节点时ajax发送点击节点的id。后台收到请求，将请求参数取出，传入数据库查询方法，此时进行判断，若参数为空说明是首次加载，则执行的sql语句是select * from demo where pId='0' 即取出根节点，然后返回，而参数不为空则说明是点击节点发出的请求，此时sql语句是select * from demo where pId='"+id+"'" 即取出父节点是我们点击节点的节点。

下面上代码

额，先看效果图吧

前台

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

</div>

</body>

var treeNodes;

var setting = {

//外观

view: {

showIcon: true, //设置是否显示节点图标

showLine: true, //设置是否显示节点与节点之间的连线

showTitle: true, //设置是否显示节点的title提示信息

fontCss : {color:"black",size:30}

//异步

async:{

enable: true,//true代表异步

url: "/Demo/DataProcessing",//异步获取数据的地址

autoParam: ["id=id"]//传递id

//数据类型

data: {

simpleData: {

enable: true, //设置是否启用简单数据格式（json格式）

idKey: "id", //设置启用简单数据格式时id对应的属性名称（对应json数据中的key）

pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构

}

//回调事件

callback: {

//点击节点事件

onClick: function(event, treeId, treeNode, clickFlag) {

// 判断是否父节点，是父节点则ajax向后台发送节点名称以获取子文件

if(treeNode.isParent){

//判断节点是否折叠，若已折叠则请求子节点的数据，返回后展开

if(treeNode.collapse==true){

//ajax提交请求

$.ajax({

url: "/Demo/DataProcessing",//请求的action路径

type:"post", //提交方式

async:false,//同步

dataType:"json",//数据格式是json

data:{'id':treeNode.id}, //传递被点击节点的id

error: function(){//请求失败后执行的事件

//请求成功后执行事件

success:function(data)

{

var jsondata= data;

//json为空说明没有子节点，不用执行操作

if(jsondata == null || jsondata == ""){ }

//否则子节点添加到父节点

else{

var treeObj = $.fn.zTree.getZTreeObj("demotree");

var parentZNode = treeObj.getNodeByParam("name",treeNode.name, null);//获取指定父节点

newNode = treeObj.addNodes(parentZNode,jsondata, false);

}

});

}

};

//首次加载用ajax请求初始化

$(function(){

$.ajax({

async : false,

cache:false,

type: 'POST',

dataType : "json",

url: "/Demo/DataProcessing",//请求的action路径

error: function () {//请求失败处理函数

alert('请求失败');

success:function(data){ //请求成功后处理函数。

treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes

}

});

var zTree;

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting, treeNodes);

});

</script>

</html>

后台servlet

package myServlet;

import java.io.IOException;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import Db.DbOperate;

import Model.Demo;

import com.alibaba.fastjson.JSON;

/**

* Servlet implementation class DataProcessing

@WebServlet("/DataProcessing")

public class DataProcessing extends HttpServlet {

private static final long serialVersionUID = 1L;

/**

* @see HttpServlet#HttpServlet()

public DataProcessing() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

String id=request.getParameter("id");

List<Demo> list;

try {

list = new DbOperate().getDemo(id);

String jsonArr = JSON.toJSONString(list);

System.out.println(jsonArr);

//response.setContentType("application/json; charset=UTF-8");

response.setCharacterEncoding("UTF-8");

response.getWriter().print(jsonArr);

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

数据库查询

package Db;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.List;

import Model.Demo;

public class DbOperate {

private static String url = "jdbc:mysql://localhost:3306/dir?rewriteBatchedStatements=true";

private static String user = "root";

private static String password = "";

public List<Demo> getDemo(String id) throws Exception {

Class.forName("com.mysql.jdbc.Driver");

System.out.print("!!!!!!!!!");

Connection conn = DriverManager.getConnection(url, user, password);

List<Demo> list = new ArrayList<Demo>();

Statement s = null;

String sql;

if(id==null||id==""){

sql= "select * from demo where pId='0'";

}

else{

sql= "select * from demo where pId='"+id+"'";

}

s = conn.createStatement();

ResultSet rs = s.executeQuery(sql);

while (rs.next()) {

list.add(new Demo(rs.getString("id"), rs.getString("name"), rs.getString("pId"), rs.getInt("isParent")));

}

if (s != null) {

s.close();

}

if (conn != null) {

conn.close();

}

return list;

}

实体类

package Model;

public class Demo {

private String id;

private String name;

private String pId;

private int isParent;

public Demo(String id, String name, String pId, int isParent) {

super();

this.id = id;

this.name = name;

this.pId = pId;

this.isParent = isParent;

}

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getpId() {

return pId;

}

public void setpId(String pId) {

this.pId = pId;

}

public int getIsParent() {

return isParent;

}

public void setIsParent(int isParent) {

this.isParent = isParent;

}

源码可以私信获取，谢谢支持

.你是如何理解HTML语义的？

答：使用合适的标签标示内容。优点在于标签语义化有利于搜索引擎建立索引进行抓取，有助于构建良好的HTML结构，便于团队开发和维护。

2.meta viewport 是做什么用的，怎么写？

答：meta表示不能被HTML的其它元素（link，script,base, style, title）之一表示的任何元素信息。viewpoint让web开发者控制视口的尺寸及比例，移动设备的viewpoint指设备屏幕上用来展示网页的那一块区域，也就是浏览器上用来展示网页的那部分，可能比浏览器的可视区大，也可能比浏览器可视区域小，一般情况，比浏览器可视区域大。属性包括width、height、initial-scale、maximum-scale、minimum-scale,使用方式是

<meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=1">

3.canvas 元素是干什么的？

答： canvas是用来绘制图形的HTML元素。

4.html5新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

答：html5新特性：

语义特性: header footer
本地存储特性： localStorage, manifest
设备访问特性: Geolocation
连接特性: webSocket
网页多媒体特性: audio、video标签
三维、图形及特效：SVG，Canvas, css3D
性能、集成特性

解决兼容性的方法：

在IE8以下，通过document.createElement(新标签)，并设置css样式。document.createElement('header'), header {display: block};
条件注释的方式

<!--[if lt IE 9]> 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
<![endif]-->

HTML和HTML5

文档类型声明上：

html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

html5:

 <!doctype html>

结构语义上 html: 基本没有体现结构语义，一般为

 <div id="header"></div>

html5: 具有结构语义

 <header></header>

5.Doctype作用？标准模式与兼容模式各有什么区别?

答： Doctype是document type(文档类型)，告诉浏览器解析器采用哪种规范（html、xhtml）来解析页面，Doctype不存在或格式错误的情况下，采用兼容模式。

标准模式（严格模式）展示的支持最新标准的网页。兼容模式（松散模式或怪异模式）展示的是兼顾传统浏览器的网页，向后兼容老式浏览器。

具体区别：

6.用户访问页面到最终渲染的整个过程？

用户输入url,浏览器向服务器发送请求，获取html,然后进入HTML渲染机制。首先，根据HTML生成DOM树；其次，根据css和js重排页面 https://segmentfault.com/a/1190000009317496

7.你对页面进行性能优化的思路和思想是什么？

答：减少http请求; 减少DOM操作，避免不必要的重绘和重排;压缩文件体积；采用CDN；

在线咨询

上一篇：把 Word文档转为移动端友好的 HTML5格式文档从未如此轻松
下一篇：教你免费下载付费文档，不限次数不用任何工具，全网资料任意复制

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端系列-DOM树以及DOM常用方法

您的项目需求