整理学习过程中js知识点,防遗忘。
JavaScript 基础知识点
一、DOM
1. DOM节点类型
HTML和XML文档可以用DOM表示为一个由节点构成的层级结构。(DOM树)
常见的节点有:文档节点、元素节点、属性节点、文本节点等。
每个节点都具有的属性:nodeType、nodeName、nodeValue
node | nodetype | nodeName | nodeValue | parentNode | 子节点 |
---|---|---|---|---|---|
Document(文档) | 9 | #document | null | null | DocumentType(<=1)、Element(<=1) |
Element(元素/标签) | 1 | 元素标签名 | null | Document / Element | Element、Text、Comment |
Text(文本) | 3 | #text | 文本内容 | Element | 不支持 |
attr(属性) | 2 | 属性名 | 属性值 | null | 不支持 |
Comment(注释) | 8 | #comment | 注释内容 | Document / Element | 不支持 |
DocumentType(文档类型) | 10 | 文档类型名称 | null | Document | 不支持 |
DocumentFragment(文档片段) | 11 | #document-fragment | null | null | Element、Text、Comment |
CDATASection(CDATA区块) | 4 | #cdata-section | CDATA区块的内容 | Document / Element | 不支持 |
1)Document类型
Ⅰ 对象方法
1. getElementById()
接收需要获取元素的id,找到则返回该元素,没找到则返回null。
获取的只有一个元素。
部分代码演示:
<body>
<div id="one">你好呀</div>
</body>
<script>
var div = document.getElementById("one");
console.log(div);
console.log(div.innerHTML);
</script>
</html>
效果显示:
2. getElementsByTagName()
传入的参数为标签,获取一组元素。返回的是一个HTMLCollection对象。
部分代码演示:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script>
var ul = document.getElementsByTagName("ul");
console.log(ul);
console.log(ul[0].innerHTML);
</script>
效果显示:
3. getElementsByName()
getElementsByName() 方法常用于单选按钮。要有name属性
部分代码演示:
<body>
<form action="">
<input type="radio" value="male" name="type">
<label for="">男</label>
<input type="radio" value="female" name="type">
<label for="">女</label>
</form>
</body>
<script>
var radios = document.getElementsByName("type");
console.log(radios);
console.log(radios[0].value);
console.log(radios[1].value);
</script>
效果显示:
4. write()、writeln()
向文档中写入内容。
write()和writeln()方法基本上无区别。唯一区别为:writeln()会在字符末尾加上“\n”符(书上说,但是验证结果是空格,而非换行符。。。)
注意:当页面加载完成后再调用 document.write()方法时,会重写整个页面。
部分代码演示:
<script>
window.onload = function() {
document.write("hello");
document.write("hello")
document.writeln("hi");
document.writeln("hi");
}
</script>
<body>
<p>天气真的好热呀!!!</p>
</body>
效果显示:
5. querySelector()、querySelectorAll()
querySelector():querySelector()方法的参数为CSS选择器,并返回文档中匹配CSS选择器的一个元素。
querySelectorAll():querySelectorAll()方法的参数也为CSS选择器,但是返回文档中匹配指定CSS选择器的所有元素。
代码展示:
<script>
window.onload = function() {
let res1 = document.querySelector("span");
console.log("querySelector", res1);
let res2 = document.querySelectorAll("span");
console.log("querySelectorAll", res2);
console.log(res2[0]);
console.log(res2[1]);
}
</script>
<body>
<div id="today">fighting!!!</div>
<span>hello!</span>
<p>逗你玩呢!!!</p>
<span>加油,宝贝!!!</span>
</body>
显示效果:
6. getElementsByClassName()
getElementsByClassName()方法返回文档中指定类名的元素集合。
传入的参数为:类名
getElementsByClassName()是html5新增的方法
代码展示:
<script>
window.onload = function() {
let res1 = document.getElementsByClassName("one")[0];
console.log(res1); //选择class为one的div元素
}
</script>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
显示效果:
Ⅱ 对象属性
1. body
document.body 可以获得body对象的引用
代码展示:
<script>
window.onload = function() {
let body = document.body;
console.log(body);
}
</script>
<body>
<p>fight!!!</p>
</body>
显示效果:
2. documentElement
document.documentElemet属性用于获取页面的 html 元素。
代码展示:
<script>
window.onload = function() {
let root = document.documentElement;
console.log(root);
}
</script>
<body>
<p>javaScript!!!</p>
</body>
显示效果:
3. title
title属性 返回文章的标题
代码展示:
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<script>
window.onload = function() {
let title = document.title;
console.log(title);
}
</script>
<body>
<p>javaScript!!!</p>
</body>
</html>
显示效果:
4. URL
URL属性:返回当前页面完整的URL
代码展示:
<script>
window.onload = function() {
let url = document.URL;
console.log(url);
}
</script>
<body>
<p>javaScript!!!</p>
</body>
显示效果:
5. domain
domain属性: 取得域名
6. referrer
referrer属性: 包含链接到当前页面的那个页面的url。(载入当前文档的文档的url)
2)Element类型
Ⅰ 对象方法
1. getAttribute()
getAttribute():getAttribute()方法返回元素节点指定的属性值。
代码展示:
<script>
window.onload = function() {
let div = document.getElementsByTagName("div")[0];
let id = div.getAttribute("id");
console.log(id);
}
</script>
<body>
<div id="today">fighting!!!</div>
</body>
显示效果:
2. setAttribute()
setAttribute():setAttribute()方法更改属性值,或者将属性设置为指定值。
setAttribute()方法传递两个参数:要设置的属性名和属性值
注意:setAttribute()适用于HTML属性,也适用于自定义属性。
代码展示:
<script>
window.onload = function() {
let div = document.getElementsByTagName("div")[0];
let id = div.setAttribute("id", "more"); //将id的属性值设置为 more
}
</script>
<body>
<div id="today">fighting!!!</div>
</body>
显示效果:
3. removeAttribute()
removeAttribute():removeAttribute()方法表示从元素中移除指定属性。
代码展示:
<script>
window.onload = function() {
let div = document.getElementsByTagName("div")[0];
let id = div.removeAttribute("id");
}
</script>
<body>
<div id="today">fighting!!!</div>
</body>
显示效果:
4. getComputedStyle()
getComputedStyle() 表示计算样式。用于获取指定元素的CSS样式
注意:获取的样式为浏览器最终渲染的样式
传入的参数:要取得的计算属性和伪元素字符串(如果不需要伪元素,可以传入null)
要点:
- getComputedStyle()方法只支持读取属性
- getComputedStyle()读取的属性,包括内联样式、嵌入样式、外部样式。(最终效果)
- 读取样式属性用getComputedStyle(),修改属性用Element.style
代码展示:
<style>
div {
width: 150px;
height: 100px;
background-color: aquamarine;
}
</style>
<script>
window.onload = function() {
let div = document.querySelector("div");
let computedStyle = window.getComputedStyle(div, null);
console.log("backgroundColor", computedStyle.backgroundColor); //是pink颜色呀
console.log("width", computedStyle.width);
console.log("height", computedStyle.height);
console.log("border", computedStyle.border);
}
</script>
<body>
<div style="background-color: pink; border: 2px solid gray"></div>
</body>
显示效果:
Ⅱ 对象属性
1. style
element.style:该属性设置或者返回元素的style属性。
注意:添加或者更改的样式均为行内样式style (优先级比普通选择器要高)
代码展示:
<style>
div {
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<script>
window.onload = function() {
let div = document.querySelector("div");
div.style.backgroundColor = "skyblue"; //对于CSS中的background-color,采用驼峰命名法
}
</script>
<body>
<div></div>
</body>
显示效果:
2. offsetHeight、offsetWidth、offsetLeft、offsetTop
偏移尺寸
offsetHeight:返回元素的高度(包括content+padding+border)
offsetWidth:返回元素的宽度(包括content+padding+border)
offsetLeft:返回元素水平偏移位置
offsetTop:返回元素垂直偏移位置
offsetParent:相当于偏移容器。有定位时,返回最近一级的祖先元素;无定位时,返回body
注意:这些属性均为只读属性,并且每次访问都会重新计算(减少、适当使用),可用局部变量保存,调用变量,减少页面渲染。得到的值没有单位!没有单位!!
1)无定位实例:
1)代码展示:
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 150px;
height: 100px;
padding: 30px;
margin: 20px;
border: 2px solid gray;
background-color: aquamarine;
}
</style>
<script>
window.onload = function() {
let div = document.getElementById("div");
console.log("offsetHeight", div.offsetHeight);
console.log("offsetWidth", div.offsetWidth);
console.log("offsetLeft", div.offsetLeft); //无定位时,返回的是body的magin值
console.log("offsetTop", div.offsetTop); //无定位时,返回的是body的magin值
console.log("offsetParent", div.offsetParent); //没有定位,则为body
}
</script>
<body>
<div id="div"></div>
</body>
1)显示效果:
2)有定位实例:
2)代码展示:
<style>
* {
padding: 0;
margin: 0;
}
#div1 {
position: relative;
width: 150px;
height: 100px;
padding: 15px;
border: 2px solid gray;
background-color: skyblue;
}
#div2 {
position: absolute;
top: 20px;
left: 10px;
width: 100px;
height: 50px;
padding: 10px;
border: 2px solid gainsboro;
background-color: yellowgreen;
}
</style>
<script>
window.onload = function() {
let div = document.getElementById("div2");
console.log("offsetHeight", div.offsetHeight);
console.log("offsetWidth", div.offsetWidth);
console.log("offsetLeft", div.offsetLeft); //有定位时,定位设置的left值
console.log("offsetTop", div.offsetTop); //有定位时,定位设置的top值
console.log("offsetParent", div.offsetParent); //没有定位,则为body
}
</script>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
2)显示效果:
注意:如果div2未设置top,以及left值,则offsetLeft = 15 、offsetTop = 15,分别是父元素对应的padding值
3. clientWidth、clientHeight
客户端尺寸
clientWidth:返回元素的可见宽度(包括content+padding)
clientHeight:返回元素的可见高度(包括content+padding)
注意:这些属性均为只读属性,并且每次访问都会重新计算(减少、适当使用),可用局部变量保存,调用变量,减少页面渲染。得到的值没有单位!没有单位!!
代码展示:
<style>
* {
padding: 0;
margin: 0;
}
#div1 {
position: relative;
width: 150px;
height: 120px;
padding: 20px;
border: 8px solid gray;
background-color: rosybrown;
}
#div2 {
position: absolute;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid ghostwhite;
background-color: gold;
}
</style>
<script>
window.onload = function() {
let div = document.getElementById("div2");
console.log("clientHeight", div.clientHeight);
console.log("clientWidth", div.clientWidth);
console.log("offsetParent", div.offsetParent); //没有定位,则为body
}
</script>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
显示效果:
4. scrollHeight、scrollWidth、scrollLeft、scrollTop
滚动尺寸
scrollHeight:可滚动区域的高度。(一般指内部可滚动内容区域的高度)
scrollWidth:可滚动区域的宽度。
scrollLeft:内容区左侧隐藏的像素数。(一般滚动条的位置改变才会有数值)
scrollTop:内容区顶部隐藏的像素数。(一般滚动条的位置改变才会有数值)
注意:这些属性均为只读属性,并且每次访问都会重新计算(减少、适当使用),可用局部变量保存,调用变量,减少页面渲染。得到的值没有单位!没有单位!!
补充:
上下滚动条都到底了的标志
scrollHeight - ScrollTop = clientHeight
scrollWidth - scrollLeft = clientWidth
代码展示:
<style>
* {
padding: 0;
margin: 0;
}
#div1 {
position: relative;
overflow: auto;
width: 150px;
height: 120px;
/* padding: 30px; */
border: 8px solid silver;
background-color: rosybrown;
}
#div2 {
position: absolute;
width: 200px;
height: 300px;
padding: 10px;
border: 5px solid ghostwhite;
background-color: goldenrod;
}
</style>
<script>
window.onload = function() {
let div = document.getElementById("div1");
let btn = document.querySelector("button");
btn.onclick = function() {
console.log("scrollHeight", div.scrollHeight); //为内容区域的高度(contentheight+padding+border)
console.log("scrollWidth", div.scrollWidth); //为内容区域的宽度(contentwidth+padding+border)
console.log("scrollLeft", div.scrollLeft);
console.log("scrollTop", div.scrollTop);
console.log("offsetParent", div.offsetParent);
}
}
</script>
<body>
<button>点击</button>
<br><br/>
<div id="div1">
<div id="div2"></div>
</div>
</body>
显示效果:
注:可以试一试给父盒子div加上padding值,scrollHeight会有些不同(会在原有基础上加上父盒子设置的padding值,总之,就是要包括所有可滚动区域的高度;宽度同理)
3)Text类型
Ⅰ 对象方法
1. createTextNode()
document.createTextNode()方法可以用来创建新文本节点。
代码展示:
<script>
window.onload = function() {
let text = document.createTextNode("goodbye");
let res = document.querySelector("span").appendChild(text);
console.log(res);
}
</script>
<body>
<div id="today">fighting!!!</div>
<span></span>
</body>
显示效果:
2. DOM节点关系
每个节点都有一个childNodes属性 (NodeList)
每个节点都有一个parentNode属性 (DOM树中的父元素)
同胞节点:previousSibling、nextSibling
父节点的子节点:第一个子节点 firstChild,最后一个子节点 lastChild
1)childNodes、children
childNodes 属性返回节点子节点的集合(包含文本节点)
children 属性包含元素 Element类型的子节点。
代码展示:
<script>
window.onload = function() {
var uls = document.getElementsByTagName("ul")[0].childNodes;
console.log("childNodes", uls);
var uls1 = document.getElementsByTagName("ul")[0].children;
console.log("children", uls1);
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
显示效果:
2)parentNode
parentNode 返回元素的父节点
代码展示:
<script>
window.onload = function() {
var lis = document.getElementsByTagName("li")[0].parentNode;
console.log("parentNode", lis);
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
显示效果:
3)previousSibling、previousElementSibling
previousSibling: 返回同一个节点树的前一个元素。(包括各种节点类型,eg: 文本节点)
previousElementSibling:返回同一个节点树的前一个Element元素,如果没有,则返回null。
代码展示:
<script>
window.onload = function() {
var li1 = document.getElementsByTagName("li")[0].previousSibling;
console.log("previousSibling", li1); //是文本节点
var li2 = document.getElementsByTagName("li")[0].previousElementSibling;
console.log("previousElementSibling", li2); //第一个li之前没有同胞节点,返回null
var li3 = document.getElementsByTagName("li")[1].previousElementSibling;
console.log("previousElementSibling", li3); //第二个li之前有同胞节点,返回第一个节点
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
显示效果:
4)nextSibling、nextElementSibling
nextSibling: 返回同一个节点树的后一个元素。(包括各种节点类型,eg: 文本节点)
nextElementSibling:返回同一个节点树的后一个Element元素,如果没有,则返回null。
代码展示:
<script>
window.onload = function() {
var li1 = document.getElementsByTagName("li")[0].nextSibling;
console.log("nextSibling", li1); //是文本节点
var li2 = document.getElementsByTagName("li")[0].nextElementSibling;
console.log("nextElementSibling", li2); //第一个li之后有同胞节点,返回第二个li
var li3 = document.getElementsByTagName("li")[2].nextElementSibling;
console.log("nextElementSibling", li3); //第三个li之后没有同胞节点,返回null
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
显示效果:
5)firstChild、firstElementChild
firstChild:返回父节点的首个子节点。
firstElementChild:返回父节点的首个元素节点。
代码展示:
<script>
window.onload = function() {
var lif = document.getElementsByTagName("ul")[0].firstChild;
console.log("fisrtChild", lif);
var lief = document.getElementsByTagName("ul")[0].firstElementChild;
console.log("firstElementChild", lief);
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
显示效果:
6)lastChild、lastElementChild
lastChild:返回父节点的最后一个子节点。
lastElementChild:返回父节点的最后一个元素节点。
代码展示:
<script>
window.onload = function() {
var lil = document.getElementsByTagName("ul")[0].lastChild;
console.log("lastChild", lil); //最后一个节点为文本节点
var lile = document.getElementsByTagName("ul")[0].lastElementChild;
console.log("lastElementChild", lile);
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
显示效果:
3. 操纵节点
1)创建新元素:createElement()
可以使用 document.createElement()方法创建新元素。
注意:此时该元素未添加到文档树中
代码展示:
<script>
window.onload = function() {
var div = document.createElement("div");
div.id = "div1";
div.innerHTML = "hello, JavaScript";
console.log(div);
}
</script>
<body>
</body>
显示效果:
2)添加节点:appendChild()、insertBefore()
appendChild():向元素的末尾添加节点。appendChild()返回新添加的节点。
insertBefore():将元素添加到指定位置,可以使用insertBefore()方法。该方法传入两个参数:要插入的节点和参照节点。
其中,要插入的节点会变成参照节点的前一个同胞节点(previousSibling);如果参照节点为 null,则会向元素末尾添加节点(同appendChild()方法一样)
注意:此时元素已经添加到DOM树中。
代码展示:
<script>
window.onload = function() {
let div = document.createElement("div"); //创建div元素
div.innerHTML = "hello everyone!!!"
let resa = document.body.appendChild(div);
console.log("appendChild()", resa);
let li = document.createElement("li"); //创建li元素
li.innerHTML = "random";
let ul = document.getElementsByTagName("ul")[0]; //获取第一个ul
let resi = ul.insertBefore(li, document.getElementsByTagName("li")[1]); //在ul中第二个li前插入创建的li元素
console.log(resi);
let li1 = document.createElement("li"); //创建li元素
li1.innerHTML = "last";
let resi1 = document.getElementsByTagName("ul")[1].insertBefore(li1, null);
console.log(resi1);
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>one</li>
</ul>
</body>
显示效果:
3)删除节点:removeChild()
removeChild():从元素中移除子节点。removeChild()返回移除的节点
代码展示:
<script>
window.onload = function() {
let p = document.getElementsByTagName("p")[0]; //获取p节点
let resr = document.body.removeChild(p);
console.log("removeChild()", resr);
}
</script>
<body>
<ul>
<li>one</li>
</ul>
<p>hello wyb!!!</p>
</body>
显示效果:
4)替换节点:replaceChild()
replaceChild(): replaceChild()方法接收两个参数:要插入的节点和要替换的节点
replaceChild()方法的返回值为:要替换的节点;并且,替换的节点会在DOM文档树中删除。
代码展示:
<script>
window.onload = function() {
let span = document.querySelector("span");
let p = document.querySelector("p");
let res = document.getElementsByTagName("div")[0].replaceChild(span, p);
console.log(res);
}
</script>
<body>
<ul>
<li>one</li>
</ul>
<div>
<p>hi!!</p>
</div>
<span>javaScript!!!</span>
</body>
显示效果:
4. 插入标记
1)innerHTML
innerHTML 属性设置或返回HTML字符串。
注意:会识别并转换HTML标签
代码展示:
<script>
window.onload = function() {
let div = document.querySelector("div");
div.innerHTML = "<strong>打卡!!!</strong>"
}
</script>
<body>
<p>hello!</p>
<div></div>
</body>
显示效果:
2)innerText
innerText 属性设置或返回文本内容。
注意:不解析HTML标签
代码展示:
<script>
window.onload = function() {
let div = document.querySelector("div");
div.innerText = "<strong>打卡!!!</strong>"
}
</script>
<body>
<p>hello!</p>
<div></div>
</body>
显示效果: