JavaScript基础知识(DOM)

Posted 席超

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础知识(DOM)相关的知识,希望对你有一定的参考价值。

获取元素的方法

要操作谁,就要先获取谁;

获取元素

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");

以上是关于JavaScript基础知识(DOM)的主要内容,如果未能解决你的问题,请参考以下文章

更改页面javascript代码(TamperMonkey)以将键盘笔触发送到父DOM

day29—JavaScript中DOM的基础知识应用

DOM探索之基础详解——学习笔记

JavaScript基础知识总结 18:dom基本操作

JavaScript基础知识总结 16:dom基本操作

JavaScript基础之DOM修改样式