前端系列-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常用方法

您的項目需求