<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 要求当前网页使用IE最高版本的内核渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, inital-scale=1.0, maximum-scale=1.0, minimun-scale=1.0">
<title>webapi学习DOM-BOM</title>
<!-- document.getElementById(id) 通过元素 id 来查找该ID的第一个元素
document.getElementsByTagName(name) 通过标签名来查找元素 返回一个标签对象的集合，伪数组形式存在，允许被遍历、[]索引、length属性
var x = document.getElementById("main");
var y = x.getElementsByTagName("p"); ->可以先获取某个标签的id,再获取里面的标签对象的集合
document.getElementsByClassName(name) 通过类名来查找元素
注：通过类名查找元素不适用于 Internet Explorer 8 及其更早版本。
本例返回 class="intro" 的所有 <p> 元素列表
var x = document.querySelectorAll("p.intro/.class等等所有css选择器'");
本例返回 class="intro" 的第一个 <p> 元素
var x=document.querySelector('#id/.class等等所有css选择器');
querySelectorAll() document.querySelector('#id'); 不适用于 Internet Explorer 8 及其更早版本。
本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值：
var x = document.forms["frm1"];
document.body 返回 <body> 元素
document.documentElement 返回 <html> 元素
如需修改 HTML 属性的值，请使用如下语法：
document.getElementById(id)(任何能够获取的都可以).attribute(属性) = new value
如需更改 HTML 元素的样式，请使用此语法：
document.getElementById(id).style.property = new style
document.getElementById("p2").style.color = "blue";
innerText和innerHTML：
innerHtml:从起始位置到终止位置，html根元素里的所有标签在字符串中可以执行,同时包留空格和换行 ->W3C属性(原生)
innerText：从起始位置到终止位置，它把html根元素里的所有标签当作字符串,空格和换行也会去掉 ->非标准属性
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
当前this指向该属性的对象(在dom里标签为对象，元素的属性为对象的属性)
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。->一般用作动画使用
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 停止-> clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
onload 和 onunload 事件
当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件(离开输入字段)经常与输入字段验证结合使用
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。
document.getElementById("myBtn").addEventListener("click", displayDate);->addEventListener添加事件监听器 DOM2,DOM3级事件
addEventListener() 方法为指定元素指定事件处理程序。
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
DOM事件监听:
语法： attachEvent一样 attachEvent()方法会被覆盖
element.addEventListener(event(事件的类型（比如 "click" 或 "mousedown"）),
function(事件发生时我们需要调用的函数),
useCapture(第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。此参数是可选的));
addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件。从上到下逐级发生多个事件
addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。
注：事件对象 even-> 事件对象的一系列数据集合，系统自动创建与传参，
注：addEventListener和attachEvent 兼容和相对应的删除方法
跨游览器兼容解决方案:
if (x.addEventListener) { //firefox、chrome、IE、safari、opera；不兼容IE7、IE8 用removeEventListener() 方法删除
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { //兼容IE7、IE8 用 detachEvent() 方法删除,->非标准方法 属于微软私人方法 在不考虑IE9以下兼容性时可使用标准方法
x.attachEvent("onclick", myFunction);
}
当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：
实例
lement.addEventListener("click", function(){ myFunction(p1, p2); });
DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生，然后捕获到当前目标，最后事件冒泡。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
事件冒泡:从最具体的元素逐级上传到最不具体的元素
事件捕获:从最不具体的元素逐级上传到最具体的元素
DOM0,DOM2,DOM3级事件,
1. DOM0: elent.onclick=funtion() {};只能添加一次，后续的会被覆盖
2. DOM2,DOM3:elenmt.addEventListener(事件的类型,事件发生时我们需要调用的函数,false/tue(事件冒泡/事件捕获))
注： 阻止事件冒泡方法: 1.e.preventDefault() W3C标准 2.e.stopPropagation() W3C标准 ->更好用
阻止事件冒泡的兼容性解决方案:if(e&&e.stopPropagetion()){
e.stopPropagetion();
}else{
window.eventcancelBubble=true;
}
注：减少操作元素的复杂性，提高性能
事件委托:element.addEventListener("click", function(e){ e.tager.style.样式等等 ="" });
注：给父级添加监听事件，捕获父级的事件，然后 游览器传e.tag 被点击的对象，被点击的对象开始冒泡到父级，父级触发事件
调整浏览器窗口的大小会触发“resize”事件处理程序
DOM节点:
elemnt.parentNode ->parentNode 属性以 Node (HTML标签、属性、文本等)对象的形式返回指定节点的父节点。
非标准 无兼容性问题 elemnt.children/children[nodenumber](调用)
elemnt.childNodes/childNodes[nodenumber](调用) ->childNodes 属性返回节点的子节点集合，以 NodeList 对象。
elemnt.firstChild -> firstChild 属性返回指定节点的首个子节点，以 Node 对象。
elemnt.lastChild ->lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。
都是获取下一个/上一个同胞元素，如果下一个同级节点不存在，则此属性返回值是null。
nextSibling
previousSibling
elemnt.cloneNode(false(浅拷贝,不复制里面的子节点)/true(深拷贝,复制里面所有的子节点))复制节点
nodeName 属性规定节点的名称。
nodeName 是只读的 ->返回 包含 HTML 元素的大写标签名
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值
nodeType 属性 ->如果节点是元素节点，则 nodeType 属性将返回 1。如果节点是属性节点，则 nodeType 属性将返回 2
nodeType 属性返回节点的类型。nodeType 是只读的。
DOM节点操作:
insertBefore(newnode(添加的元素) Node,existingnode(类名等)) 方法在您指定的已有子节点之前插入新的子节点。
inewnode Node 对象 必需。需要插入的节点对象。
existingnode Node object 可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。
提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。
您也可以使用 insertBefore 方法插入/移动已有元素。
删除：用 detachEvent() 方法删除,->非标准方法 属于微软私人方法 在不考虑IE9以下兼容性时可使用标准方法
还有如 elenmt.removeChild(节点对象)等关于节点访问的删除;
这段代码创建了一个新的 <p> 元素：
var para = document.createElement("p");
如需向 <p> 元素添加文本，则必须首先创建文本节点。这段代码创建了一个文本节点：
var node = document.createTextNode("这是一个新段落。");
然后您需要向 <p> 元素追加这个文本节点：
para.appendChild(node);
appendChild() 方法向节点添加最后一个子节点。
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
如需删除某个 HTML 元素，您需要知晓该元素的父：removeChild(child);
如需替换元素的，请使用 replaceChild('替换内容/元素/属性等','需修改的元素') 方法：
HTML元素操作:
改变 HTML 元素
方法 描述
element.innerHTML = html content 改变元素的 inner HTML
element.attribute = value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式
添加和删除元素
方法 描述
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流
改变元素样式:
如需更改 HTML 元素的样式，请使用此语法：
ocument.getElementById(id).style.property = style
NodeList和HTMLCollection ：不能使用Array方法，可以间接使用，比如手动书写
访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
HTMLCollection是 HTML 元素的集合。
NodeList 是文档节点的集合。
NodeList 和 HTML 集合几乎完全相同。
HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
它们都有定义列表（集合）中项目数的 length 属性。
它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。
访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
访问 NodeList 项目，只能通过它们的索引号。
只有 NodeList 对象能包含属性节点和文本节点。
节点列表不是数组！
节点数组看起来像数组，但并不是。
您能够遍历节点列表并像数组那样引用其节点。
不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()
移除属性:elemnt.removeAttribute('属性');
-->
<style>
/* <!-- 密文切换练习 --> */
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #0d09ee;
}
.box label {
position: absolute;
right: 2px;
bottom: 2px;
}
.box input {
width: 100%;
height: 50px;
border: 0;
/* 去除输入字段被选中后的状态中的边框 */
outline: none;
}
/* //精灵图 */
#icons {
width: 400px;
}
#icons li {
list-style: none;
float: left;
width: 84px;
height: 84px;
background-color: aqua;
background: url(../imgs/icon.jpg) no-repeat;
margin: 5px;
}
#imgss {
width: 500px;
height: 500px;
}
#imgss #im {
float: left;
width: 25%;
height: 25%;
}
table {
border: 1px solid #ccc;
}
thead {
background-color: #9290ee;
}
td {
text-align: center;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!-- 密文切换练习 -->
<div class="box">
<input type="text" value="用户名">
<label for="" id='mw'>明文</label>
<input type="password" id="mm">
<!-- 精灵图循环放入练习 -->
<ul id='icons'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 按钮更改样式练习 -->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<!-- 换背景练习 -->
<div id="imgss">
<img src="../imgs/1.jpg" alt="" id="im">
<img src="../imgs/2.jpg" alt="" id="im">
<img src="../imgs/3.jpg" alt="" id="im">
<img src="../imgs/4.jpg" alt="" id="im">
</div>
<!-- 表单全选反选 -->
<table>
<thead>
<tr>
<th> <input type="checkbox" id="All_ck"> </th>
<th>商品</th>
<th>属性</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="Ck"></td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox" id="Ck"></td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" id="Ck"></td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td><input type="checkbox" id="Ck"></td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<!-- //留言模块练习 -->
<textarea name="" id="textarea_value" cols="200" rows="5" style="width: 400px;"></textarea>
<input type="button" id="fb" value="发布">
<ul class="ulw" style="width: 500px;background-color: aqua;">
</ul>
</body>
<script>
// <!-- 密文切换练习 -->
var mm = document.getElementById('mm');
var mw = document.getElementById('mw');
var l = 0;
function Onck() {
if (l == 0) {
mm.type = 'text';
mw.innerHTML = '密文';
l = 1;
} else if (l == 1) {
mm.type = 'password';
mw.innerHTML = '明文';
l = 0;
}
}
mw.onclick = Onck; //()加括号的错误,即会直接触发该事件(会直接执行Onck()->触发)。不加括号即为绑定该段程序(属性)->动态调用
//精灵图循环练习
var icons = document.getElementById('icons').getElementsByTagName('li');
for (var i = 0; i < icons.length; i++) {
var n = i + 1;
var indexX = n * 50;
var indexY = n * 54;
icons[i].style.backgroundPosition = '-' + indexX + 'px' + ' -' + indexY + 'px';
}
//按钮练习，改变按钮样式
var btn = document.getElementsByTagName('button');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = '';
}
this.style.backgroundColor = '#ccc';
}
}
//换皮肤练习
var imgs = document.querySelectorAll('#im');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
document.body.style.backgroundImage = "url(" + this.src + ")";
}
}
//表格全选反选
var All_ck = document.getElementById('All_ck');
var Ck = document.querySelectorAll('#Ck');
All_ck.onclick = function() {
for (var i = 0; i < Ck.length; i++) {
Ck[i].checked = this.checked;
}
for (var i = 0; i < Ck.length; i++) {
Ck[i].onclick = function() {
var fl = true;
for (var i = 0; i < Ck.length; i++) {
if (Ck[i].checked == false) {
fl = false;
break;
}
}
All_ck.checked = fl;
}
}
}
//留言模块练习
var fb = document.querySelector('#fb');
var ul_lis = document.querySelector('.ulw');
var texts = document.querySelector('#textarea_value');
fb.addEventListener('click', as);
function as(e) {
if (texts.value == "") {
alert('输入为空，不能发布');
} else if (texts.value != "") {
var li = document.createElement('li');
li.style.listStyle = 'none';
li.innerHTML = texts.value + "<a href='javascript:;'>" + "->删除-<</a>";
li.style.paddingBottom = '50px';
ul_lis.insertBefore(li, ul_lis.firstChild)
}
var lis = ul_lis.querySelectorAll('li');
for (var k = 0; k < lis.length; k++) {
lis[k].onclick = function() {
ul_lis.removeChild(this);
}
}
console.log(e.target);
console.log(e);
}
</script>
</html>
扫一扫
10-31
462
462
11-01
469
469
10-31
729
729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
