javascript入门基础篇重点第十节

本文链接：https://blog.csdn.net/qq_34187029/article/details/53036825

节点元素的其它操作方法（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

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等）