javascript入门基础篇重点 第十节
2016-11-04 16:59
363 查看
节点元素的其它操作方法 （childNodes、nodeType、firstElementChild等使用）
childNodes用法
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<script type="text/javascript">
var obox=document.getElementById("box");
var childmod=obox.childNodes; -------->拿到的是类数组
console.log(childmod.length); //结果是9 childNodes是拿到指定id底下所有的元素标签
如例题:除了拿到box
//底下的p标签以外还拿到了p标签(元素节点)前面的空格(body的文本节点)注释节点 也可拿到
nodeName和nodeType用法
for(var i=0;i<obox.childNodes.length;i++){
console.log(childmod[i].nodeName+"===="+childmod[i].nodeType);---->for循环出指定id底下元素的名字和类型
nodeValue用法
childmod[0].nodeValue="2222";------>能读能写但只能用在文本节点上(即例题中的p标签前面空格)或注释节点
children用法
var childmod=obox.children;-------->只拿到指定id底下的标签元素(元素节点)children所有浏览器都支持
console.log(childmod);
console.log(childmod.length);//结果:4
console.log(childmod[0]+"====="+childmod[childmod.length-1]);------->拿到第一个和最后一个元素
firstChild和lastChild用法
consloe.log(obox.fristChild+"===="+obox.lastChild);---->拿到第一个和最后一个元素(主流浏览器拿到的是文本节点(即空格)而只有在IE低版本中才能拿到标签元素(标签节点))
firstElementChild和lastElementChild用法
consloe.log(obox.fristElementChild+"===="+obox.lastElementChild);拿到第一个和最后一个元素(适用于主流浏览器)
nextSibling和nextElementSibling用法
consloe.log(obox.nextSibling+"===="+obox.nextElementSibling);//结果是script
|
拿到下一个兄弟元素nextSibling和nextElementSibling区别在于nextSibling在IE浏览器中可以直接拿到指定ID的兄弟元素而主流浏览器中只能拿到浏览器的文本节点(即空格)所以主流浏览器只能使用nextElementSibling
previousSibling和 previousElemenSibling用法
consloe.log(obox.previousSibling+"===="+obox.previousElemenSibling);------>拿到上一个兄弟元素特点与上相同
parentNode和parentElement用法(两种方法均可在IE和主流浏览器中使用)
consloe.log(obox. parentNode+"===="+obox.parentElement);
//结果是body------->通过子元素拿到父元素
appendChild(dom)用法-------->括号里面只能添加dom对象不能添加字符串
例如：
var pdom=document.createElement("p")----->创建一个标签
var text=document.createTextNode("123")----->创建一个文本
obox.appendChild(pdom)
obox.appendChild(text) //结果:在id为obox里面最后一个标签后面添加一个p标签并写入文本123
先创建一个节点或文本再用appendChild往后追加(也可使用innerHTML)
||
insertBefore用法
obj.insertBefore(obj,obj.children[i]);-------->在id里面下标指定的子元素前方添加一个标签或文本对象
例如:obox.insertBefore(text,obox.children[1]);
removerChild用法
例如:
var par=obox.parentNode;----->找到id为obox的父亲元素body,script和obox是同级关系
setTimeout(function(){
par.removerChild(obox);--------->通过找到父亲元素删除子元素
},1000);
replaceChild用法
例如:
var par=obox.parentNode;----->找到id为obox的父亲元素body
<
bd82
span style="font-size:18px;">
var sdom=document.createElement("p");
sdom.innerHTML="abc";------->创建一个p标签并写入文本赋值给sdom
setTimeout(function(){
par.replaceChild(sdom,obox);--------->通过找到父亲元素替换子元素(newobj,oldobj)
},1000);
offsetParent用法(如果父级的div中的css样式没有设定定位就一直往上找到body作为他的父级)
console.log(obox.offsetParent.id);---->拿到夫级的id名字
offsetLeft
offsetTop--------->拿到夫级元素距离左边和顶部的距离(设置了定位)
</script>
</body>
</html>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#box{width:200px;height: 200px;padding: 10px;border:10px solid red;background: green;margin:30px;overflow: hidden;}
</style>
</head>
<body>
var boxDom = document.getElementById("box");
//console.log(getStyle(boxDom,"width"));//200px
// console.log("可视宽度包括width+padding=="+boxDom.clientWidth);
// console.log("真实宽度包括width+padding+border=="+boxDom.offsetWidth);
//console.log("滚动高度包括width+padding=="+boxDom.scrollHeight);
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};------>拿到内联样式属性(currentStyle是兼容IE浏览器而getComputedStyle是兼容主流浏览器)
window.innerWidth和window.innerHeight----->拿到浏览器可视高度的宽和高
document.body.clienWidth和document.body.clienHeight-------->拿到浏览器body页面的宽和高
以上两者区别:innerWidth和innerHeight会因为浏览器的放大缩小以及浏览器其他的子页面的打开而产生变化
而document.body.clienWidth则是网页页面本身的宽和高
document.body.scrollWidth和document.body.scrollHeight---------->拿到浏览器出现滚动条时的宽和高
</script>
</body>
</html>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
BOM主要方法的相关讲解（window.open()、window.location.href等）
window.open("http://www.mengkedu.com");
document.onclick = function(){
alert(window.location);
window.location.href = "http://www.baidu.com";-------->点击页面打开新的网站
};
窗体改变大小的时候
window.onresize = function(){
console.log(1);
};
窗体滚轮滚动时候
window.onscroll = function(){
console.log(2);
};
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
outerHTML/innerHTML、outerText/innerText/textContent讲解
innerHTML:带有标签格式 支持所有浏览器,一般都使用它。
innerText:获取文本 在火狐浏览器不支持innerText 但是它支持textContent
textContent:获取文本，但是它保留格式 ,ie678不支持textContent但是支持innerText
兼容写法：
var text = oBox.innerText || oBox.textContent;
childNodes用法
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<script type="text/javascript">
var obox=document.getElementById("box");
var childmod=obox.childNodes; -------->拿到的是类数组
console.log(childmod.length); //结果是9 childNodes是拿到指定id底下所有的元素标签
如例题:除了拿到box
//底下的p标签以外还拿到了p标签(元素节点)前面的空格(body的文本节点)注释节点 也可拿到
nodeName和nodeType用法
for(var i=0;i<obox.childNodes.length;i++){
console.log(childmod[i].nodeName+"===="+childmod[i].nodeType);---->for循环出指定id底下元素的名字和类型
nodeValue用法
childmod[0].nodeValue="2222";------>能读能写但只能用在文本节点上(即例题中的p标签前面空格)或注释节点
children用法
var childmod=obox.children;-------->只拿到指定id底下的标签元素(元素节点)children所有浏览器都支持
console.log(childmod);
console.log(childmod.length);//结果:4
console.log(childmod[0]+"====="+childmod[childmod.length-1]);------->拿到第一个和最后一个元素
firstChild和lastChild用法
consloe.log(obox.fristChild+"===="+obox.lastChild);---->拿到第一个和最后一个元素(主流浏览器拿到的是文本节点(即空格)而只有在IE低版本中才能拿到标签元素(标签节点))
firstElementChild和lastElementChild用法
consloe.log(obox.fristElementChild+"===="+obox.lastElementChild);拿到第一个和最后一个元素(适用于主流浏览器)
nextSibling和nextElementSibling用法
consloe.log(obox.nextSibling+"===="+obox.nextElementSibling);//结果是script
|
拿到下一个兄弟元素nextSibling和nextElementSibling区别在于nextSibling在IE浏览器中可以直接拿到指定ID的兄弟元素而主流浏览器中只能拿到浏览器的文本节点(即空格)所以主流浏览器只能使用nextElementSibling
previousSibling和 previousElemenSibling用法
consloe.log(obox.previousSibling+"===="+obox.previousElemenSibling);------>拿到上一个兄弟元素特点与上相同
parentNode和parentElement用法(两种方法均可在IE和主流浏览器中使用)
consloe.log(obox. parentNode+"===="+obox.parentElement);
//结果是body------->通过子元素拿到父元素
appendChild(dom)用法-------->括号里面只能添加dom对象不能添加字符串
例如：
var pdom=document.createElement("p")----->创建一个标签
var text=document.createTextNode("123")----->创建一个文本
obox.appendChild(pdom)
obox.appendChild(text) //结果:在id为obox里面最后一个标签后面添加一个p标签并写入文本123
先创建一个节点或文本再用appendChild往后追加(也可使用innerHTML)
||
insertBefore用法
obj.insertBefore(obj,obj.children[i]);-------->在id里面下标指定的子元素前方添加一个标签或文本对象
例如:obox.insertBefore(text,obox.children[1]);
removerChild用法
例如:
var par=obox.parentNode;----->找到id为obox的父亲元素body,script和obox是同级关系
setTimeout(function(){
par.removerChild(obox);--------->通过找到父亲元素删除子元素
},1000);
replaceChild用法
例如:
var par=obox.parentNode;----->找到id为obox的父亲元素body
<
bd82
span style="font-size:18px;">
var sdom=document.createElement("p");
sdom.innerHTML="abc";------->创建一个p标签并写入文本赋值给sdom
setTimeout(function(){
par.replaceChild(sdom,obox);--------->通过找到父亲元素替换子元素(newobj,oldobj)
},1000);
offsetParent用法(如果父级的div中的css样式没有设定定位就一直往上找到body作为他的父级)
console.log(obox.offsetParent.id);---->拿到夫级的id名字
offsetLeft
offsetTop--------->拿到夫级元素距离左边和顶部的距离(设置了定位)
</script>
</body>
</html>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#box{width:200px;height: 200px;padding: 10px;border:10px solid red;background: green;margin:30px;overflow: hidden;}
</style>
</head>
<body>
var boxDom = document.getElementById("box");
//console.log(getStyle(boxDom,"width"));//200px
// console.log("可视宽度包括width+padding=="+boxDom.clientWidth);
// console.log("真实宽度包括width+padding+border=="+boxDom.offsetWidth);
//console.log("滚动高度包括width+padding=="+boxDom.scrollHeight);
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};------>拿到内联样式属性(currentStyle是兼容IE浏览器而getComputedStyle是兼容主流浏览器)
window.innerWidth和window.innerHeight----->拿到浏览器可视高度的宽和高
document.body.clienWidth和document.body.clienHeight-------->拿到浏览器body页面的宽和高
以上两者区别:innerWidth和innerHeight会因为浏览器的放大缩小以及浏览器其他的子页面的打开而产生变化
而document.body.clienWidth则是网页页面本身的宽和高
document.body.scrollWidth和document.body.scrollHeight---------->拿到浏览器出现滚动条时的宽和高
</script>
</body>
</html>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
BOM主要方法的相关讲解（window.open()、window.location.href等）
window.open("http://www.mengkedu.com");
document.onclick = function(){
alert(window.location);
window.location.href = "http://www.baidu.com";-------->点击页面打开新的网站
};
窗体改变大小的时候
window.onresize = function(){
console.log(1);
};
窗体滚轮滚动时候
window.onscroll = function(){
console.log(2);
};
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
outerHTML/innerHTML、outerText/innerText/textContent讲解
innerHTML:带有标签格式 支持所有浏览器,一般都使用它。
innerText:获取文本 在火狐浏览器不支持innerText 但是它支持textContent
textContent:获取文本，但是它保留格式 ,ie678不支持textContent但是支持innerText
兼容写法：
var text = oBox.innerText || oBox.textContent;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript入门基础篇重点 第一节
- javascript入门基础篇重点 第二节2.
- javascript入门基础篇重点 第十六节----正则表达式
- javascript入门基础篇重点 第七节
- javascript入门基础篇重点 第三节
- javascript入门基础篇重点 第六节
- javascript入门基础篇重点 第五节
- javascript入门教程基础篇
- JavaScript极简入门教程（一）：基础篇
- JavaScript学习基础篇【第1篇】: JavaScript 入门
- JavaScript极简入门教程（一）：基础篇
- html5基础入门学习教程之javascript基础篇
- AJAX入门之深入理解JavaScript中的函数
- JavaScript教程--从入门到精通（九）
- JavaScript教程--从入门到精通（六）
- JDBC入门基础篇
- JavaScript from C#(入门篇)
- JavaScript教程--从入门到精通（序）
- AJAX入门之深入理解JavaScript中的函数
- JavaScript教程--从入门到精通（七）