Web前端面试题笔记_HTML&CSS篇

1.DOM操作：怎样添加、移除、移动、复制、创建和查找节点

(1)创建新节点

createDocumentFlagment() //创建一个DOM片段

createElement() //创建一个新的DOM Element 节点

createTextNode() //创建新的Text 节点

createAttribute() //创建新的Attribute节点

(2)添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

(3)查找

getElementById() //通过元素Id查找

getElementsByTagName() //通过元素标签名查找

getElementsByName() // 通过元素的Name属性的值查找

(4)复制

cloneNode() //用于复制节点，接收一个布尔值，true表示深复制（复制本身及其所有子节点），false表示浅复制（复制节点本身，不复制子节点）；

----------------------->相关代码<-----------------------

HTML Content: 基本结构

  <div id="myDiv">
  	<p>test1</p>
  	<p>test2</p>	
  </div>

@创建新节点示例：通过createElement（）方法创建新节点

var divNode = document.createElement('div'); //创建一个div节点

@添加元素节点示例：

//为新创建的div元素节点添加内容
divNode.innerHTML="new div node";
var myDiv = document.getElementById("myDiv"); //获取id为myDiv的div节点
myDiv.appendChild(divNode); //将divNode节点添加到myDiv节点中

添加后HTML结构为：

<div id="myDiv">  
    <p>test1</p>  
    <p>test2</p>
    <div>new div node</div>      
</div>

@通过appendChild() 移动已存在的节点

//在以上的HTML结构上，移动节点
var myDiv = document .getElementById("myDiv");
myDiv.appendChild(myDiv.firstChild);

执行后的HTML结构为：

<div id="myDiv">  
    <p>test2</p>
    <div>new div node</div>  
    <p>test1</p>      
</div>

@创建文本节点

// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// 创建一个空的span元素节点
// 没有id,没有任何属性和内容
var sp1 = document.createElement("span");

// 添加一个id属性,值为'newSpan'
sp1.setAttribute("id", "newSpan");

// 创建一个文本节点
var sp1_content = document.createTextNode("新的span元素的内容.");

// 将文本节点插入到span元素中
sp1.appendChild(sp1_content);

@或者通过insertBefore() 将节点移动特定的位置:该方法接收两个参数，第一个是要插入的节点，第二个是参照节点。

var myDiv = document.getElementById("myDiv");
var testDiv = document.createElement("div");
      testDiv.innerHTML="test div";
myDiv.insertBefore(testDiv,myDiv.firstChild);

执行后为（未执行前按照基本的HTML结构）：

<div id="myDiv">  
    <div>test div</div>
    <p>test1</p>
    <p>test2</p>      
</div>

@通过removeChild()移除dom节点，接收一个参数，即要移除的节点，返回被移除的节点。注意被移除的节点仍在文档中，不过在文档中已经没有位置了

var myDiv = document.getElementById("myDiv");
var firstNode = myDiv.removeChild(myDiv.firstChild);

@replaceChild()方法用指定的节点替换当前节点的子节点，接收两个参数，第一个参数是要插入的节点，第二个参数是要被替换的节点，返回被替换的节点

var myDiv = document.getElementById("myDiv");
	    var replaceDiv = document.createElement("p");
     	    replaceDiv.innerHTML="replace test";
     	    var firstNode = document.getElementsByTagName('p')[0];//获取myDiv中的第一个子节点
	    myDiv.replaceChild(replaceDiv,firstNode);

@复制节点

			var myDiv = document.getElementById("myDiv");
			var deepList = myDiv.cloneNode(true);//深复制
			var lightList = myDiv.cloneNode(false);//浅复制
				myDiv.appendChild(deepList);
				myDiv.appendChild(lightList);

2.DOM对象与jQuery对象如何转换

DOM--->jQuery:

DOM对象转换为jQuery对象可以通过$()转换，如：$(document.getElementById("Dom_id"));

var elem = document.getElementById("elem_id"); //获取DOM对象

$(emem);//转换成jQuery对象

jQuery--->DOM:

jQeruy对象为一个对象的集合，转换为DOM对象就需要取出其中的某一项，可以通过索引获取,如：

$('#ele_id').html();

$('div').eq(1)[0]

3.如何将一个div垂直居中

前端观察：css实现垂直居中的5种方法