一、javascript的组成
1. ECMAScript:JS的语法标准----ECMAScript5.0,(简称ES5)、ECMAScript2015(ES6)、ECMAScript2017。
2. BOM:浏览器对象模型。
3. DOM:文档对象模型。
二、什么是DOM?
1. Document Object Model:文档对象模型
2. DOM的核心:document对象
3. DOM的作用:可以访问和操作XML和HTML文档中标签、标签的属性、节点的属性和方法。HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
4. 在DOM中将整个html文档看做是一个倒立的树(树状结构):一个html页面就是一个DOM对象,是一棵DOM HTML树
(1)DOM HTML树的根节点:html
(2)元素(Element):html文档中的标签
(3)节点(Node):html文档中的内容
5. DOM树中的节点
节点Node,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
比如:html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点,但是实际上它们的具体类型是不同的。
- 文档节点:整个HTML文档
- 标签节点:HTML文档中的所有标签
- 属性节点:标签的属性—内置属性(不管用不用都存在)、自定义属性(本身没有后期自己加上的)。
- 文本节点:HTML标签中的文本内容,标签中的文本、换行、空格等
- 注释节点:<!-- 注释内容 --!>。
6. 基本概念
- 根节点:根节点是html,有且只能有一个
- 子节点:某个节点的下一级节点
- 父节点:某个节点的上一级节点
- 兄弟节点:拥有相同父节点的节点
let div = document.getElementById('dt')
console.log(div)
console.log(div.__proto__) //__proto__:表示元素的原型
7. 节点属性
8. 文档节点
文档节点(Document)代表的是整个HTML文 档,网页中的所有节点都是它的子节点。
document对象作为window对象的属性存在的,我们不用获取可以直接使用。
通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。
9. 元素节点
HTML中的各种标签都是元素节点(Element),这也是我们最常用的一个节点。
浏览器会将页面中所有的标签都转换为一个元素节点, 我们可以通过document的方法来获取元素节点。
例如:document.getElementById(),根据id属性值获取一个元素节点对象。
10. 属性节点
属性节点(Attribute)表示的是标签中的一个一个的属 性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分。可以通过元素节点来获取指定的属性节点。
例如:元素节点.getAttributeNode("属性名"),根据元素节点的属性名获取一个属性节点对象。
注意:我们一般不使用属性节点。
11. 文本节点
文本节点(Text)表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点,它包括可以字面解释的纯文本内容。文本节点一般是作为元素节点的子节点存在的。获取文本节点时,一般先要获取元素节点,在通过元素节点获取文本节点。
例如:元素节点.firstChild;,获取元素节点的第一个子节点,一般为文本节点。
三、通过document对象来查找html页面中的元素
1. getElementById(“id属性值”):通过标签的id属性获取标签
2. getElementsByName(“name属性值”):通过标签的name属性获取标签,返回值的类型是NodeList
3. getElementsByTagName(“标签名”):通过标签名获取标签,返回值的类型是HTMLCollection
4. getElementsByClassName(“class属性值”):通过标签的class属性获取标签,返回值的类型是HTMLCollection
5. querySelector(‘#id属性值’):返回第一个指定id属性值的标签
querySelector(‘.class属性值’):返回第一个指定class属性值的标签
querySelector(‘标签名’):返回第一个指定标签名的标签
6. querySelectorAll(‘.class属性值’):返回所有指定class属性值的标签。返回值的类型是NodeList
querySelectorAll(‘标签名’):返回所有指定标签名的标签。返回值的类型是NodeList
<body>
<button id="btn">我是按钮</button>
<button>我是按钮</button>
<button class="btn2">我是按钮</button>
<button class="btn3">我是按钮</button>
<ul class="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<script>
var btn = document.getElementById("btn");
console.log(btn);
var btn1 = document.getElementsByTagName("button");
console.log(btn1);
var btn2 = document.getElementsByClassName("btn2");
console.log(btn2);
var btn3 = document.querySelector(".btn3");
console.log(btn3);
var list = document.querySelectorAll(".list li");
console.log(list);
</script>
</body>
四、获取 HTML 的值
- 元素节点.innerText 获取 HTML 元素的 inner Text。
- 元素节点.innerHTML 获取 HTML 元素的 inner HTML。
- 元素节点.属性 获取 HTML 元素的属性值。
- 元素节点.getAttribute(attribute) 获取 HTML 元素的属性值。
- 元素节点.style.样式 获取 HTML 元素的行内样式值。
<body>
<button id="btn">我是按钮</button>
<div id="box">
<h1>我是Box中的大标题</h1>
</div>
<a id="a" href="https://www.baidu.com">打开百度,你就知道!</a>
<div style="width: 100px;height: 100px;background: red;" id="box2"></div>
<script>
var btn = document.getElementById("btn");
console.log(btn.innerText);//创建一个按钮,然后获取按钮的文本内容
var box = document.getElementById("box");
console.log(box.innerHTML);//创建一个div,然后在div中插入一个h1标题,获取div中的html代码
var a = document.getElementById("a");
console.log(a.href);
console.log(a.getAttribute("href"));//创建一个超链接,默认为空,设置href属性为https://www.baidu.com ,使用JavaScript代码读取href属性
var box = document.getElementById("box2");
console.log(box.style.width);//创建一个正方形div,默认颜色为红色,使用JavaScript代码获取div的宽度
</script>
</body>
五、document对象的属性
1. document.body:返回文档的body元素
2. document.documentElement:返回文档的html元素
3. document.forms:返回文档的form(表单)对象
<body>
<form action="#" method="get">
用户名:<input type="text" name="userName"><br/>
密码:<input type="password" name="pwd" id=""><br/>
<input type="reset">
<input type="submit">
</form>
<script>
console.log(document.body)
console.log(document.documentElement)
console.log(document.forms)//返回的是集合,长度为1
console.log(document.forms[0].tagName)//FORM
console.log(document.forms[0].method)//get
</script>
</body>
六、Element对象的属性和方法
在JavaScript代码中使用html的标签(Element)属性和方法
1. children属性:用来获取某个元素的子元素
(1)HTMLCollection:通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。
(2)NodeList:document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象,IE11返回的是HTMLCollection对象。
(3)HTMLCollection对象用于元素操作
(4)NodeList对象用于节点操作
七、元素的属性和方法
1. 属性:
(1)innerHTML:设置和返回起始标签和结束标签之间的html(包括标签)
(2)innerText:设置或返回元素中去除所有标签的内容(不能解析标签—-不识别标签)
(3)textContent:设置或者返回指定节点的文本内容(不识别换行)
2. 方法:
(1)document.write(“html内容”):在文档中写入指定的内容
(2)document.writeln(“html内容”):向文档写入指定的内容后并换行,比document.write多一个空格
八、标签的属性
1. attributes:返回标签的所有属性集合
date-设置自定义属性
2. setAttribute(name, value):设置标签的属性值。参数name表示属性名,参数value表示属性值
name = "value"
<div id="d1" class="dt" name="mydiv" title="woniu">
北京大学
</div>
<button id="btn">更改文字</button>
<script>
let btn_font = document.getElementById('btn')
btn_font.addEventListener('click',function(){
document.getElementById('d1').setAttribute('class','dd')
})
</script>
练习 对input中输入的用户名进行验证。当用户名合法时在input后显示“用户名正确”,否则显示”用户名错误“
<style>
.ok{
color:green;
}
.fail{
color: red;
}
</style>
<body>
<div class="login">
<label>
用户名:<input type="text" id="username"> <span id="msg"></span>
</label>
<br><br>
<button id="btn_check">验证</button>
</div>
<script>
let check = document.getElementById('btn_check')
check.addEventListener('click',function(){
//1.获取input的value
let uname = document.getElementById('username').value
//2.对用户名进行判断
if(uname === 'abc'){
document.getElementById('msg').innerText = '用户名正确'
document.getElementById('msg').setAttribute('class','ok')
}else{
document.getElementById('msg').innerText = '用户名错误'
document.getElementById('msg').setAttribute('class','fail')
}
})
</script>
</body>
九、元素的样式
1. 用法:
(1)元素对象名.style.样式属性名 = 属性值
注意:“样式属性名”在使用时需要将单词之间的’-‘删除,将第二个单词的首字母大写
<body>
<div id="dd"></div>
<script>
let div = document.getElementById('dd')
div.style.width='200px'
div.style.height='200px'
div.style.backgroundColor='skyblue'
</script>
</body>
(2)HTML5对象样式的操作:
1)一个元素的class属性可以有多个值:作用是在保留原有样式的基础上添加新的样式
2)如何在js程序运行过程中动态的添加class属性值:
classList属性:是元素的class属性的列表
2. classList属性提供的方法和属性
(1)属性:length —— 某个标签的class属性值的个数(即多少个类名)
(2)方法:
1)add(‘字符串’):给元素添加类名。一次只能添加一个
2)remove(‘字符串’):将元素的类名删除。一次只能删除一个
3)toggle(‘字符串’):若类名存在则删除,不存在则添加
4)item(index):根据index,来获取元素的类名
5)contains(‘类名’):判断元素是否含有给定的类名,若有返回true,没有返回false
<style>
.box1{
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2{
margin: 100px auto;
}
</style>
<body>
<div class="box1 box2 box3 box4" id="box"></div>
<button id="center">居中</button>
<button id="recover">恢复</button>
<button id="toggle">交替</button>
<button id="item">索引</button>
<button id="contain">是否包含</button>
<script>
document.querySelector('#center').addEventListener('click',function(){
document.querySelector('#box').classList.add('box2')
})
document.querySelector('#recover').addEventListener('click',function(){
document.querySelector('#box').classList.remove('box2')
})
document.querySelector('#toggle').addEventListener('click',function(){
document.querySelector('#box').classList.toggle('box2')
})
document.querySelector('#item').addEventListener('click',function(){
let name = document.querySelector('#box').classList.item(4)
console.log(name)
})
document.querySelector('#contain').addEventListener('click',function(){
let flag = document.querySelector('#box').classList.contains('box1')
console.log(flag)
})
</script>
</body>
十、节点操作
采用操作节点的方式来操作页面中的元素
1. 获取节点时使用的属性
1)firstChild:获取当前节点的首个子节点。
注意:换行符、空格等也是节点
2)nextSibiling:返回同一层级中指定节点之后紧跟的节点
<div id="dt">
<p>西安市</p>
<p>咸阳市</p>
<p>宝鸡市</p>
<p>渭南市</p>
</div>
<script>
let div = document.querySelector('#dt')
console.log('div的第一个子节点:',div.firstChild.nextSibling)
</script>
3)lastChild:访问当前节点的最后一个子节点
4)previousSibling:返回同一层级中指定节点的前一个节点
<div id="dt">
<p>西安市</p>
<p>咸阳市</p>
<p>宝鸡市</p>
<p>渭南市</p>
</div>
<script>
let div = document.querySelector('#dt')
console.log('div的第一个子节点:',div.firstChild.nextSibling)
console.log('div的最后一个子节点:',div.lastChild.previousSibling)
</script>
5)nodeName:节点的名称
6)nodeValue:节点的值
7)nodeType:节点类型
返回值是1:表示当前节点的类型是标签(元素)
返回值是2:表示属性节点
返回值是3:表示文本节点
8)parentNode:访问当前元素节点的父节点
9)childNodes:当前节点的所有子节点
(1)相同点:都可以获取子元素
(2)不同点:
childNodes不仅包含文本节点,也包含其他的元素节点,返回值类型是NodeList
children返回的元素节点(即标签),返回值类型是HTMLCollection
<body>
<div id="dt">a
<input type="text" value="2">
<p>咸阳</p>
<p>西安</p>
<p>宝鸡</p>
</div>
<script>
let div = document.getElementById('dt')
//
// console.log('div的第二个子节点:',div.firstChild)
// console.log('div的第一个子节点:',div.firstChild.nextSibling)
// console.log('div的最后一个子节点:',div.lastChild)
// console.log('div的第一个子节点:',div.lastChild.previousSibling)
// console.log('div的第一个子节点:',div.firstChild.nextSibling.nodeName)
// console.log('div的第一个子节点:',div.firstChild.nextSibling.nodeValue)
// nodeType:节点类型。1:表示当前节点的类型是标签;2:表示属性节点;3:表示的文本节点
console.log(div.firstChild.nextSibling.nodeType)//1:表示当前节点的类型是标签;
console.log(div.getAttributeNode('id').nodeType)//2:表示属性节点
console.log(div.firstChild.nodeType)//3:表示的文本节点
console.log('div的所有子节点(childNodes)',div.childNodes)//NodeList(9) [text, input, text, p, text, p, text, p, text]
console.log('div的所有子节点(children)',div.children)//HTMLCollection(4) [input, p, p, p]
console.log('div的id属性值:',div.getAttribute('id'))//获取id属性值
console.log('div的id属性值:',div.getAttributeNode('id').nodeType)//获取id属性的类型
</script>
</body>
<body>
<h2 id="ht">黄昏</h2>
<input type="text" name="txt" id="node_value">
<button id="insert">插入元素</button>
<script>
// 1.获取按钮
let btn_insert = document.querySelector('#insert')
// 2.注册事件监听
btn_insert.addEventListener('click',function(){
// 2.1 获取input值
let input = document.querySelector('#node_value').value
// 2.2 给input创建文本节点input_txt
let input_txt = document.createTextNode(input)
// 2.3 创建元素(标签)h2节点
let h2_node = document.createElement('h2')
// 2.4 将文本添加到h2中
h2_node.appendChild(input_txt)
// 3.获取插入位置上的标签 <h2 id="ht">黄昏</h2>
let h2_position = document.querySelector('#ht')
if (h2_position.parentNode) {
h2_position.parentNode.insertBefore(h2_node,h2_position)
}
})
</script>
</body>
2.节点操作
1. 复制节点:
cloneNode(deep)
参数deep是boolean型。true/false
true:表示深度复制(将节点及其子节点都进行复制)—- 深拷贝
false:表示浅复制(只复制节点而不复制子节点)—- 浅拷贝
<select id="sex">
<option value="%">请选择</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
<hr>
<div id="div_clone"></div>
<button id="clone_false" onclick="copyNode(false)">浅拷贝</button>
<button id="clone_true" onclick="copyNode(true)">深拷贝</button>
<script>
function copyNode(bool){
//1.获取select标签
let sel = document.getElementById('sex')
//2.复制select
let newNode = sel.cloneNode(bool)
//3.获取div
let mydiv = document.getElementById('div_clone')
let br = document.createElement('br')
mydiv.appendChild(newNode)
mydiv.appendChild(br)
}
</script>
2. 删除节点:removeChild(node)
(1)参数node为要删除的节点
(2)前提:被删除的节点必须为空(没有子节点)
<body>
<select name="" id="sex">
<option value="%">请选择</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
<hr>
<div id="div_clone"></div>
<button id="clone_false" onclick="copyNode(false)">浅拷贝</button>
<button id="clone_true" onclick="copyNode(true)">深拷贝</button>
<script>
function copyNode(bool) {
// 1.获取select标签
let select = document.getElementById('sex')
// 2.复制select
let copySelect = select.cloneNode(bool)
//3.获取div
let mydiv = document.getElementById('div_clone')
let br = document.createElement('br')//添加br标签
mydiv.appendChild(copySelect)
mydiv.appendChild(br)
}
</script>
</body>
3. hasChildNodes():判断当前节点是否有子节点
返回值为false:表示没有子节点
返回值为true:表示有子节点
<div id="dd">
<p>钱学森</p>
<p>蒋英</p>
<p>金庸</p>
</div>
<button type="button" id="btn_del" onclick="delNode()">删除</button>
<script>
function delNode(){
let div = document.getElementById('dd')
if(div.hasChildNodes()){
div.removeChild(div.lastChild)
}
}
</script>
4. 替换节点:replaceChild(newNode,oldNode)
用newNode节点替换oldNode节点
function replaceNode(txt,bj)
{
var rep = document.getElementById("b1");
if(rep)
{
var newNode = document.createElement(bj);//创建新节点
newNode.setAttribute("id","b1");//设置新节点的id属性
var newTxt = document.createTextNode(txt);//创建节点文本
newNode.appendChild(newTxt);//将文本添加到节点中
rep.parentNode.replaceChild(newNode,rep);//替换节点
}
}
</script>
<body>
<h2 id="b1">可以替换文本内容</h2>
输入标记:
<input id="bj" type="text" /><br /><br />
输入文本:
<input id="txt" type="text" /><br /><br />
<input type="button" value="替换" onclick="replaceNode(txt.value,bj.value)" />
5. 追加节点
(1)创建元素节点:
document.createElement()
let txt_node = document.createTextNode(txt)
(2)在指定节点的末尾追加节点
appendChild(newNode)
(3)在指定节点之前添加节点
insertBefore(newNode,node):将结点newNode插入到节点node之前
该方法需要通过插入节点(node)的父节点来调用