Web前端面试题笔记_HTML&CSS篇
来源:互联网 发布:经纬度距离计算器软件 编辑:程序博客网 时间:2024/05/22 01:18
(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篇
- Web前端面试题笔记_JavaScript篇
- web前端面试题及答案 css篇
- 几个 div+css web前端面试题
- web前端面试题-html,css
- web开发-web前端面试题(html-css-js)-学习笔记十二
- css前端面试题
- Web前端技巧_HTML+CSS+JavaScript (个人经验)
- web前端面试题
- Web前端面试题
- web前端面试题
- web前端面试题
- web前端面试题
- web前端面试题
- web前端面试题
- Web前端面试题
- web前端面试题
- web前端面试题
- CVS配置和登录
- Linux下的进程间通信-详解
- 1006. Sign In and Sign Out (25)
- 让你提前认识软件开发(1):序言
- PreferenceActivity详解
- Web前端面试题笔记_HTML&CSS篇
- LeetCode Binary Tree Inorder Traversal
- VC----资源文件RC && RES
- How to Compile and Run C/C++ program on Ubuntu 11.10
- 获取Android手机型号,系统版本,App版本号等信息
- 程序语言,编译?解释?
- 第四章 网络层
- 笨办法提高代码质量
- 运营商解释宽带实际网速减少的原因