初识javaScript（十一）DOM
1 DOM介绍
js由三部分构成：
1：ECMAScript：语言的基本语法、类型、流程控制、函数
2：DOM：规定了如何通过js访问页面元素。
3：BOM：规定了如何通过js访问浏览器对象。
DOM：
2：js要能访问浏览器对象。各个浏览器给js提供了一个对象window，js通过window对象来和浏览器窗口交互。在window对象中我们最关心的对象是页面文档。所以window对象的一个属性对象：document对象。代表了整个页面的文档对象。
js 访问页面文档的核心对象就是document对象。直接在js代码中使用即可。
3: DOM(document object model): 文档对象模型。学习DOM，主要学习document的属性和方法的使用。在DOM模型中。document对象是整个树形模型结构的根节点(root).然后根据根节点可以访问所有的其他的子节点。
总结：学习DOM就是学习如何通过document对象来操作页面中的各个节点。
页面中的节点的类型：
1：元素节点、标签节点 ***
2：注释节点
3：文本节点
4：属性节点
5：文档节点 document ***
2 页面节点的属性介绍
对于任何的节点都有如下的三个属性：
nodeName、 nodeType、nodeValue
页面中的节点的类型：
1：元素节点、标签节点 ***
nodeName: 标签名字大写
nodeType: 1
nodeValue: null
2：注释节点
nodeName: #comment
nodeType: 8
nodeValue: 注释的内容
3：文本节点
nodeName: #text
nodeType: 3
nodeValue: 节点内容
4：属性节点
nodeName: 属性的名字
nodeType: 2
nodeValue: 属性的值
5：文档节点 document ***
nodeName: #document
nodeType: 9
nodeValue: null
<body>
<!--I am comments-->
<div id="box">千万里我追寻着你</div>
<p></p>
<script>
//1元素节点
var div = document.getElementById("box");
console.log (typeof div);//object
console.log (div.nodeName);//DIV
console.log (div["nodeType"]);//1
console.log (div.nodeValue);//null
var pTag = document.getElementsByTagName("p")[0];
console.log (pTag.nodeName);//P
console.log (pTag.nodeType);//1
console.log (pTag.nodeValue);//null
console.log ("--------------");
//注释节点 得到div节点的前面的前面的节点对象
var com = div.previousSibling.previousSibling;
console.log (typeof com);//object
console.log (com.nodeName);//#comment
console.log (com.nodeType);//8
console.log (com.nodeValue);//I am comments
console.log ("--------------");
//文本节点
var text = div.firstChild;
console.log (typeof text);//object
console.log (text.nodeName);//#text
console.log (text.nodeType);//3
console.log (text.nodeValue);//千万里我追寻着你
console.log ("--------------");
//属性节点
var attr = div.getAttributeNode("id");
console.log (typeof attr);//object
console.log (attr.nodeName);//#text
console.log (attr.nodeType);//3
console.log (attr.nodeValue);//千万里我追寻着你
console.log ("--------------");
//文档节点
console.log (typeof document);//object
console.log (document.nodeName);//#document
console.log (document.nodeType);//9
console.log (document.nodeValue);//null
</script>
</body>
3 DOM获取页面元素节点的方式
获得页面元素节点的方式：
**1：document.getElementById()
a: 因为id具有唯一性，所以通过id获取页面元素的效率比较高。
b：兼容性比较好。
c：返回该id的第一个元素对象。
d：id 大小写敏感
2：根据元素的class属性获得。
document.getElementsByClassName(“sty”);
a: 返回的是一个类数组对象，集合。通过下标去访问某一个元素。
b: 该方法存在兼容问题。低版本IE不兼容。
c：大小写敏感
3：document.getElementsByTagName()
通过元素的标签获得元素节点
a：返回类数组对象 HTMLCollection. 通过下标访问具体的节点。
b：大小写不敏感
4: document.getElementsByName()
通过元素的 name 属性获得所有的元素。
a：一般是获得表单元素的
b: 返回一个类数组对象，NodeList
**5:document.querySelector()
通过选择器获得
a: 获得符合选择器的所有的元素中的第一个元素。
6：document.querySelectorAll
通过选择器获得所有的元素
返回的是NodeList ，类数组对象，通过下标获取元素。
补充：
如果想获取某个元素内的子元素，
a：可以直接使用选择器
b：获得父元素，然后在获得子元素。
<body>
<div id="div1">我第div1</div>
<div id="div2">我是div2</div>
<span>span1</span>
<span>span2</span>
<ul>
<li class="sty">1</li>
<li>2</li>
<li class="sty">3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="box">
<span>div-span1</span>
<span>div-span2</span>
</div>
<input type="checkbox" name="hobby" >抽烟
<input type="checkbox" name="hobby" >喝酒
<input type="checkbox" name="hobby" >烫头
<script>
//1：document.getElementById()
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// 2：根据元素的class属性获得。
var eles = document.getElementsByClassName("sty");
console.log (eles);//HTMLCollection(2) [li.sty, li.sty]
//通过下标访问某一个元素。
console.log (eles[0]);
console.log (document.getElementsByClassName("sty")[1]);
//3 document.getElementsByTagName()
var tags = document.getElementsByTagName("SPAN");
console.log (tags);//HTMLCollection(4) [span, span, span, span]
console.log (tags[1]);
//4 document.getElementsByName()
var hobbys = document.getElementsByName("hobby");
//NodeList(3) [input, input, input]
console.log (hobbys);
console.log (hobbys[1]);
// document.querySelector
var ele = document.querySelector(".sty");
console.log (ele);
//document.querySelectorAll
var list = document.querySelectorAll(".sty");
// NodeList(2) [li.sty, li.sty]
console.log (list);
var spans = document.querySelectorAll("span");
console.log (spans);
//获得某个元素的子元素
var spans1 = document.querySelectorAll("#box span");
console.log (spans1);
//可以先获得父元素。然后通过父元素对象去获取所有的子元素。
var box = document.getElementById("box");
var spans2 = box.getElementsByTagName("span");
console.log (spans2);
</script>
</body>
4 getElementsByTagNamequerySelectorAll的区别 getElementsByTagName和querySelectorAll的区别
1: getElementsByTagName 返回的是 HTMLCollection
querySelectorAll 返回的是NodeList
2: getElementsByTagName返回的结果，会随着页面元素的变化而变化，是动态的，querySelectorAll 不会变化，是静态的。
<body>
<div>我是div1</div>
<div>我是div2</div>
<script>
var divs = document.getElementsByTagName("div");
var div1s = document.querySelectorAll("div");
console.log (divs);
console.log (div1s);
//动态的给页面中添加一个div
//创建了一个div的对象
var div = document.createElement("div");
//设置div的内容
div.innerHTML = "我是新的div";
//添加到页面中
document.body.appendChild(div);
console.log (divs);
console.log (div1s);
</script>
</body>
5 元素节点中内容的操作
元素节点中的内容的操作：
元素节点的四个属性。innerHTML、innerText、value、textContent
**innerHTML
获得：获得是元素内的所有的内容，包括标签。
设置：如果设置了标签，那么标签生效。
innerText：兼容性不太好。在低版本的狐火兼容性有问题。
获得：只能获得元素内的所有的纯文本内容。不能获得标签。
设置：如果设置的内容中包含了标签，那么标签也作为普通内容显示。不作为标签使用。
**value：主要应用于表单的内容的设置和获取。
textContent：使用：和innerText使用一致。textContent 的兼容性更好。
<body>
<div id="box">helloworld<span>I am span</span></div>
<input type="text" value="千万次的问">
<button>点我</button>
<script>
//获得页面的元素
var box = document.getElementById("box");
//innerHTML
//获得元素中的内容 helloworld<span>I am span</span>
console.log (box.innerHTML);
//设置元素中的内容
box.innerHTML = "time time agian, you ask me.";
//设置内容，如果包含标签，标签作用生效。
box.innerHTML = "<i>问我到底....</i>"
//innerText
console.log (box.innerText);//问我到底...
box.innerText = "<i>time time again ,I ask myself</i>";
//获得input
var ipt = document.querySelector("input");
console.log (ipt.value);//获得里面的内容。
var btn = document.querySelector("button");
//给按钮添加单击事件。单击的时候触发执行。
btn.onclick = function () {
//设置内容。
ipt.value += 1;
}
</script>
</body>
6 属性节点的获取
属性节点的获取
1：通过所在的元素节点对象的属性attributes 获得。
语法：元素节点.attributes
返回：类数组对象。通过下标访问具体的属性节点。
2：通过所在的元素对象的方法。getAttributeNode 获得。
语法：元素节点.getAttributeNode(属性)
返回：属性节点对象。
3: 如果获取不成功，返回null。
<body>
<div id="box" title="hello"></div>
<script>
//1
var box = document.getElementById("box");
var attrs = box.attributes;
//NamedNodeMap {0: id, 1: title, id: id, title: title, length: 2}
console.log (attrs);
console.log (attrs[0]);
console.log (typeof attrs[0]);//object
//2
var node = box.getAttributeNode("id");
console.log (node);
console.log (box.getAttributeNode("id1"));//null
</script>
</body>
7 属性节点的属性值的获取
属性节点的属性值的获取。
1：获得属性节点，然后通过节点对象的nodeValue属性获取。
2: 通过元素节点的方法 getAttribute(“属性名”) 获得对应的属性值。
3：*** 通过 元素节点.属性名 获得。
4：*** 通过 元素节点[属性名] 获得
补充：对于自定义属性值的获得，只能通过方式1和方式2获得。
方式3和4只能操作元素的默认具有的属性。
<body>
<div id="box" title="hello" myattr="helloworld"></div>
<script>
var box = document.getElementById("box");
//方式-1
var attr = box.getAttributeNode("id");
var value = attr.nodeValue;
console.log (value);//box
//方式-2
var value = box.getAttribute("title");
console.log (value);//hello
//方式-3
console.log (box.id);//box
//方式-4
console.log (box["title"]);//hello
//自定义属性的获得
console.log (box.getAttributeNode("myattr").nodeValue);//OK
console.log (box.getAttribute("myattr"));//OK
console.log (box.myattr);//undefined
console.log (box["myattr"]);//undefined
</script>
</body>
8 属性值的设置
属性值的设置和属性值的获取的方式基本一致。
一共四种方式。
1: 使用属性节点的nodeValue设置。
2：通过元素节点的 setAttribute方法设置。
3：元素.属性名=值 设置 ***
4：元素[“属性名”] = 值 设置。 ***
<body>
<div id="box" title="hello" myattr="helloworld"></div>
<script>
var box = document.getElementById("box");
//方式-1
var node = box.getAttributeNode("title");
node.nodeValue = "world";
//方式-2
box.setAttribute("title","helloworld");
//方式-3
box.title = "hello-3";
//方式-4
box["title"] = "hello-4";
//自定义属性的值的设置
box.getAttributeNode("myattr").nodeValue = "你好";//OK
box.setAttribute("myattr","你好不好");//OK
//下面的两种方式不可以。
box.myattr = "我好不好";//
box["myattr"] = "说你好你就好，不好也好";
</script>
</body>
9 class属性的操作
元素的class属性的操作
class是js中的一个关键字，所以在使用的时候需要特殊处理。
使用点引用符和中括号获取和设置class属性的时候，都要将class
修改为className.后两种方式的修改：class—className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
}
.sty1{
background-color: red;
}
.sty2{
background-color: pink;
}
.sty3{
background-color: blue;
}
.sty4{
background-color: chocolate;
}
.sty0{
background-color: orange;
}
</style>
</head>
<body>
<div id="box" class="sty0"></div>
<script>
var box = document.getElementById("box");
//获取class属性
console.log (box.getAttributeNode("class").nodeValue);//ok
console.log (box.getAttribute("class"));//ok
// console.log (box.class)//undefined
console.log (box.className);//ok
console.log (box["className"]);//ok
//设置class属性
box.getAttributeNode("class").nodeValue = "sty1";
box.setAttribute("class","sty2");
box.className = "sty3";
box["className"] = "sty4";
</script>
</body>
</html>
10 selected和checked属性的操作
selected、checked 作为属性，属性名和属性值是一样的。
selected、checked 属性的值为布尔值。
选中的状态则为true，否则为false。
设置上述的两个属性：也是通过设置该属性为true和false来设置的。
<body>
<input type="checkbox" name="hobby" checked>读书
<input type="checkbox" name="hobby" >运动
<input type="checkbox" name="hobby" checked>旅游
<br>
<select name="" id="">
<option value="">西游记</option>
<option value="">红楼梦</option>
<option value="" selected>三国演义</option>
<option value="">水浒传</option>
</select>
<br>
<button id="btn">点我</button>
<script>
var ipts = document.querySelectorAll("input");
console.log (ipts[0].checked);//true
console.log (ipts[1].checked);//false
console.log (ipts[2].checked);//true
var opts = document.getElementsByTagName("option");
console.log (opts[0].selected);//false
console.log (opts[2].selected);//true
//实现：将没有选中的变为选中，选中的变为不选中。
var btn = document.getElementById("btn");
btn.onclick = function () {
for (let i = 0; i <ipts.length ; i++) {
//将它的选中的相反的状态赋值给自己。
ipts[i]["checked"] = !ipts[i].checked;
}
}
</script>
</body>
11 属性节点的创建
属性节点的创建：
1：*** 通过属性节点的setAttribute 方法来添加属性节点。
元素.setAttribute(属性名,属性值);
2: document.createAttribute(属性名)
在内存中创建了一个属性节点对象。
然后需要通过 元素.setAttributeNode(属性节点)
添加到元素中。
上述两种方式都可以用来添加自定义的属性。
<body>
<div id="box">hello</div>
<script>
//添加属性 方式-1
var box = document.getElementById("box");
box.setAttribute("title","hello");
box.setAttribute("myattr","world");
//方式-2
var attr = document.createAttribute("class");
attr.nodeValue = "sty";
box.setAttributeNode(attr);
var attr1 = document.createAttribute("myattr1");
attr1.nodeValue = "how are you";
box.setAttributeNode(attr1);
</script>
</body>
12 属性节点的删除
属性节点的删除：
通过使用元素对象的方法 removeAttribute
语法：元素对象.removeAttribute(属性名)；
返回：undefined。
<body>
<div id="box" title="hello" myattr="world"></div>
<script>
var box = document.getElementById("box");
box.removeAttribute("title");
console.log (box.removeAttribute("myattr"))
</script>
</body>
13 节点之间的关系
节点之间的关系：
1:元素的子节点：
childNodes: 返回类型为类数组NodeList
2：第一个孩子节点
firstChild : 返回第一个子节点对象。
3：最后一个孩子节点
lastChild：返回最后一个孩子节点对象。
4: 节点的父节点：
parentNode: 获取节点的父节点对象
5：下一个兄弟节点：
nextSibling ：获取下一个兄弟节点
6：上一个兄弟节点：
previousSibling：获取上一个兄弟节点
<body>
<ul><li>第1个li</li>
<li id="li2">第2个li</li>
<!--我是注释-->
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li></ul>
<script>
//获得父元素对象
var ul = document.querySelector("ul");
//1:元素的子节点：
//NodeList(13) [text, li, text, li#li2, text, comment, text, li, text, li, text, li, text]
var nodes = ul.childNodes;
console.log (nodes);
// 2：第一个孩子节点
var first = ul.firstChild;
console.log (first);
// 3：最后一个孩子节点
var lastChild = ul.lastChild;
console.log (lastChild);
// 4: 节点的父节点：
var li2 = document.getElementById("li2");
var parent = li2.parentNode;
console.log (parent);
// 5：下一个兄弟节点：
var li2 = document.getElementById("li2");
var comment = li2.nextSibling.nextSibling;
console.log (comment);
//6：上一个兄弟节点
var li2 = document.getElementById("li2");
var li1 = li2.previousSibling.previousSibling;
console.log (li1);
//html元素节点
console.log (li2.parentNode.parentNode.parentNode);
</script>
</body>
14 元素节点之间的关系
元素节点之间的关系
1：元素所有的子元素节点
父元素.children
2：元素的第一个子元素节点
父元素.firstElementChild
3：元素的最后的一个子元素节点
父元素.lastElementChild
4：元素的父元素节点
元素.parentElement
5：元素的下一个兄弟元素节点
元素.nextElementSibling
6：元素的上一个兄弟元素节点
元素.previousElementSibling
<body>
<ul>
<li>第1个li</li>
<li id="li2">第2个li</li>
<!--我是注释-->
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
</ul>
<script>
var ul = document.querySelector("ul");
// 1：元素所有的子节点
var children = ul.children;
//HTMLCollection(5)
console.log (children);
// 2：元素的第一个子节点
var first = ul.firstElementChild;
console.log (first);
// 3：元素的最后的一个子节点
var last = ul.lastElementChild;
console.log (last);
// 4：元素的父节点
var li2 = document.querySelector("#li2");
var parent = li2.parentElement;
console.log (parent);
// 5：元素的下一个兄弟节点
var li5 = li2.nextElementSibling.nextElementSibling.nextElementSibling;
console.log (li5);
// 6：元素的上一个兄弟节点
var li1 = li2.previousElementSibling;
console.log (li1);
</script>
</body>
15 文档中的特殊节点
文档中的特殊的节点：
html元素节点：document.documentElement
head元素节点：document.head
title元素节点：document.title 获得和设置标题
body元素节点：document.body
文档节点：document
<body>
<script>
var html = document.querySelector("html");
console.log (html);
html = document.documentElement
console.log (document.head);
//获得设置title
console.log (document.title);
document.title = "头头是道";
console.log (document.body);
console.log (document)
</script>
</body>
16 document对象的属性
document 对象的属性：
document.doctype:文档类型说明节点
**document.documentURI:加密之后的地址栏地址。
**document.readyState: 代表了当前文档加载的状态。只能取三个值。
loading : 文档正在加载中。
interactive：加载外部资源文件。
complete：加载完毕
document.URL: 地址栏中的地址。
*document.domain: 地址栏中的地址中的域名
http://war.163.com/photoview/4T8E0001/2309579.html
对于任意一个url地址来说都是由四部分构成：
http：传输协议。
war.163.com：域名 对应着网络中的一台主机。
本质上来将，定义网络中的一台主机，是通过主机的IP地址的。
但是IP地址不好记忆。所以每一个IP都被赋予了一个别名，通过该名字可以同样的访问该主机。
这个名字就被称为这台主机的域名。
DNS：一台服务器。域名解析服务器。负责将域名转换为IP地址的工作。
photoview/4T8E0001/2309579.html：对应着域名主机中的一个文件。
隐藏的端口号：通过哪个端口来访问要访问的服务器。http协议来说默认的端口号是80.
document.images: 所有的页面中的img标签元素。
document.scripts: 页面中的所有的script标签元素。
document.links: 所有的超链接
document.forms：所有的表单
document.lastModified：文档最后一次修改的时间
document.charset: 页面字符集
***document.location：代表了地址栏对象。可以直接使用。因为该对象也是window对象的属性。
location 对象有一个很重要的属性 href：代表了地址栏中地址。
可以通过修改该属性，实现页面的跳转。会产生浏览记录。
<body>
<button id="btn">百度一下</button>
<script>
//文档类型说明节点
console.log (document.doctype);
/*http://localhost:63342/web-js/18.document%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7.html?_ijt=5i4juhrkt543pbd1dlrf7ko5ef*/
console.log (document.documentURI);
console.log (decodeURIComponent(document.documentURI));
console.log (decodeURI(document.documentURI));
//每隔50毫秒执行一次匿名函数
// setInterval(function () {console.log (document.readyState); },50)
console.log (document.URL);
// document.images;
// document.scripts;
// document.links
// document.forms
// console.log (document.lastModified);
// console.log (document.charset);
// console.log (document.location);
var btn = document.querySelector("button");
btn.onclick = function () {
document.location.href = "http://www.baidu.com";
}
</script>
</body>
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
