JavaScript基础知识（DOM）

Posted 2020-12-28 席超

获取元素的方法

要操作谁，就要先获取谁；

获取元素

1、document.getElementById:通过ID名来获取元素

兼容性： 在IE8以下，会默认把name属性当做id来获取；

document : 文档；上下问必须是document

get : 获取

element : 元素

By : 通过

Id : ID名字；

id 是唯一的；不能重复

var oBox = document.getElementById("box");// {className:"",style:{}}
var oBox1 = oBox.getElementById("box1");
var a = document.getElementById("a");
console.log(a);
console.log(oBox);
console.log(typeof oBox);// "object"
oBox.style.background = "red";

2、document.getElementsByTagName: 通过标签名来获取元素

是一个类数组集合

var arr = oBox.getElementsByTagName("span");// "标签名"[{style:{}]
arr[0].style.background = "red";
console.log(arr);

3、document.getElementsByClassName(); 类数组集合；

IE8及以下是不兼容的；

通过class名字来获取元素；

var a = document.getElementsByClassName("box");
console.log(a.length);
console.log(a);

4、document.getElementsByName;通过name属性来获取元素；

在IE9及以下，会默认把id名是a的获取到；

var inputs = document.getElementsByName("a");
console.log(inputs);

5、document.documentElement 获取当前的html

console.log(document.documentElement);
var htm = document.getElementsByTagName("html")
console.log(htm);

6、body :获取页面的body元素；

console.log(document.body);

获取当前浏览器可视窗口高度和宽度

var winW= document.documentElement.clientWidth || document.body.clientWidth;
var winH = document.documentElement.clientHeight || document.body.clientHeight;
console.log(winW);
console.log(winH);

7、document.querySelector();

var divs = document.querySelector(".box");
// 如果是id名，前面需要加一个#;如果是class,要加一个.
console.log(divs);

8、document.querySelectorAll();

// querySelectorAll: 获取所有的元素；
var divs = oBox.querySelectorAll("div")
console.log(divs);

 

DOM的节点和属性

DOM的节点 ： 四种类型的节点；

TYPE	nodeType	nodeName	nodeValue
元素节点	1	大写的标签名	null
文本节点	3	text	文本内容
注释节点	8	comment	注释内容
document	9	document	null

空格和换行都是文本节点；

节点的属性

1、childNodes : 获取当前元素所有的子节点；

console.log(parent.childNodes);
parent.childNodes[1].style.width="100px";

2、children : 获取当前元素的子元素节点；

3、firstChild : 获取第一子节点；

firstElementChild : 第一个子元素节点； 在IE8及以下，是不兼容的；

4、lastChild :获取最后一个子节点

lastElementChild : 最后一个子元素节点；在IE8及以下，是不兼容的；
console.log(parent.firstChild);
console.log(parent.firstElementChild);

5、 previousSibling : 获取上一个哥哥节点

previousElementSibling 封装
var last = document.getElementById("last");
// 获取上一个哥哥的元素节点；
function getBrother(curEle) {
var pre = curEle.previousSibling;
while(pre){
if(pre.nodeType ===1){//不满足，说明不是一个元素；
return pre;
}
pre = pre.previousSibling;
}
return pre;
}
getBrother(sec);
getBrother(last)

6、 nextSibling : 获取下一个弟弟节点

nextElementSibling : 获取下一个元素弟弟节点；
console.log(sec.previousSibling);

7、parentNode: 获取当前元素的父亲节点；

console.log(sec.previousSibling);
console.log(sec.parentNode.previousElementSibling);
var body =document.body;
document 没有父亲节点；如果没有获取结果就是null；
console.log(body.parentNode.parentNode.parentNode);

 

动态操作DOM的方法

oBox.innerHTML = "函数很重要";

1.document.createElement;创建元素

var newDiv = document.createElement("div");
console.log(newDiv);

2.appendChild : 向元素的末尾添加子节点；

父级.appendChild(儿子)
oBox.appendChild(newDiv);
//Failed to execute ‘appendChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘
var div = document.getElementsByTagName("div")[1];

3.removeChild : 删除子节点；

oBox.removeChild(div);
var span = document.createElement("span")

4.replaceChild : 替换节点；

父级.replaceChild(newChild,oldChild);
oBox.replaceChild(span,div);

5.insertBefore :把元素节点插入某个节点的前面

父级.insertBefore(newChild,oldChild)
oBox.insertBefore(span,div);

6.cloneNode : 复制节点；

// 参数： true： 深克隆，会当前元素以及子孙节点全部获取到
// false或不传 : 浅克隆，只会克隆当前元素节点；
console.log(oBox.cloneNode(true));
console.log(oBox.cloneNode());
var a = document.getElementsByClassName("a")[0];
var b = a.cloneNode(true);
oBox.appendChild(a);

7. set/get/remove Attribute : 设置自定义行内属性；

//getAttribute 不能获取通过元素.属性 = 属性值这种方式新增的属性；可以获取行内直接设置的，还有通过setAttribute 来设置的属性；
div.setAttribute("name","time");
div.index = 100;
console.log(div.name);// undefined
div.setAttribute("na","ti")
如果获取不到自定义行内属性，结果就是null；
console.log(div.getAttribute("name"));
console.log(div.getAttribute("index"));
console.log(div.getAttribute("hh"));
// 移出行内属性
div.removeAttribute("na");