Web前端面试题笔记_HTML&CSS篇
2014-03-03 20:17
711 查看
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: 基本结构
@创建新节点示例:通过createElement()方法创建新节点
添加后HTML结构为:
@通过appendChild() 移动已存在的节点
执行后的HTML结构为:
@创建文本节点
@或者通过insertBefore() 将节点移动特定的位置:该方法接收两个参数,第一个是要插入的节点,第二个是参照节点。
@通过removeChild()移除dom节点,接收一个参数,即要移除的节点,返回被移除的节点。注意被移除的节点仍在文档中,不过在文档中已经没有位置了
@replaceChild()方法用指定的节点替换当前节点的子节点,接收两个参数,第一个参数是要插入的节点,第二个参数是要被替换的节点,返回被替换的节点
@复制节点
2.DOM对象与jQuery对象如何转换
DOM--->jQuery:
DOM对象转换为jQuery对象可以通过$()转换,如:$(document.getElementById("Dom_id"));
jQuery--->DOM:
jQeruy对象为一个对象的集合,转换为DOM对象就需要取出其中的某一项,可以通过索引获取,如:
3.如何将一个div垂直居中
前端观察:css实现垂直居中的5种方法
(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种方法
相关文章推荐
- web前端面试题(HTML&CSS)下 答案详解
- 前端面试题------HTML&CSS篇
- web前端面试题(HTML&CSS)上 答案详解
- Web前端-HF-HTML5Programming笔记-CH1&CH2 HTML5&JS&DOM
- 【自学笔记】前端面试题之CSS(部分HTML)
- 前端基础笔记HTML&CSS&JS
- (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
- web前端——html基础笔记 NO.13{盒模型,颜色值,字体的缩写}
- BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
- BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇
- WEB前端学习笔记-HTML(下)
- web前端——html基础笔记 NO.7
- web前端 关于IE8,7,6兼容问题笔记<四处收集>
- BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
- WEB前端学习笔记-HTML(中)
- 各大互联网公司前端笔试面试题–HTML,CSS篇
- 各大互联网公司2014前端笔试面试题–HTML,CSS篇
- web前端——html基础笔记 NO.12{css布局模型(流动,浮动,层模型)}
- web前端入门知识笔记——html基础(传智播客)
- web前端入门知识笔记——html基础(传智播客)