DOM
<script>
// HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
// HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
// 属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
// innerHTML 属性
// 获取元素内容最简单的方法是使用 innerHTML 属性。
// innerHTML 属性可用于获取或替换 HTML 元素的内容。
// innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>
// innerText属性改变的纯文本节点内容
document.getElementById("box").innerText="123";
// 方法是您能够完成的动作（比如添加或删除 HTML 元素）。
// 1getElementById()
// 通过id属性获取一个元素节点对象
// document.getElementsByTagName()
// 通过标签名获取一组元素节点对象
// document.getElementsByName()
// 通过name属性获取一组元素节点对象
// 果您需要找到拥有相同类名的所有 HTML 元素，请使用
// getElementsByClassName()
// 如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用
// querySelectorAll() 方法。
// textContent获取文本节点
// 不会解析标签
// 添加和删除元素
// 方法 描述
// document.createElement(element) 创建 HTML 元素
// document.removeChild(element) 删除 HTML 元素
// document.appendChild(element) 添加 HTML 元素
// document.replaceChild(element) 替换 HTML 元素
// document.write(text) 写入 HTML 输出流
// 改变 HTML 元素
// 方法 描述
// element.innerHTML = new html content 改变元素的 inner HTML
// element.attribute = new value 改变 HTML 元素的属性值
// element.setAttribute(attribute, value) 设置 HTML 元素的属性值
// element.style.property = new style 改变 HTML 元素的样式
// 当样式中有-需要使用驼峰法
// 获取元素的行内样式
// element.style.cssText
// 设置行内样式,会覆盖行内样式，不是追加样式
// element.style.cssText="color:red;font-size:2em"
// element.style.property获取元素的某个属性
// HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
// HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
// 属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
// innerHTML 属性
// 获取元素内容最简单的方法是使用 innerHTML 属性。
// innerHTML 属性可用于获取或替换 HTML 元素的内容。
// innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>
// innerText属性改变的纯文本节点内容
document.getElementById("box").innerText="123";
// 方法是您能够完成的动作（比如添加或删除 HTML 元素）。
// 1getElementById()
// 通过id属性获取一个元素节点对象
// document.getElementsByTagName()
// 通过标签名获取一组元素节点对象
// document.getElementsByName()
// 通过name属性获取一组元素节点对象
// 果您需要找到拥有相同类名的所有 HTML 元素，请使用
// getElementsByClassName()
// 如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用
// querySelectorAll() 方法。
// textContent获取文本节点
// 不会解析标签
// 添加和删除元素
// 方法 描述
// document.createElement(element) 创建 HTML 元素
// document.removeChild(element) 删除 HTML 元素
// document.appendChild(element) 添加 HTML 元素
// document.replaceChild(element) 替换 HTML 元素
// document.write(text) 写入 HTML 输出流
// 改变 HTML 元素
// 方法 描述
// element.innerHTML = new html content 改变元素的 inner HTML
// element.attribute = new value 改变 HTML 元素的属性值
// element.setAttribute(attribute, value) 设置 HTML 元素的属性值
// element.style.property = new style 改变 HTML 元素的样式
// 当样式中有-需要使用驼峰法
// 获取元素的行内样式
// element.style.cssText
// 设置行内样式,会覆盖行内样式，不是追加样式
// element.style.cssText="color:red;font-size:2em"
// element.style.property获取元素的某个属性
// # 修改html标签(双标签)
// ## 标签内容
// ### innerHTML
// 获取标签内部的内容
// element.innerHTML
var box=document.getElementById("box").querySelectorAll("ul li");
// var content=box.innerHTML;
// box=[].slice.call(box);
// box=[...box];
console.log(box);
for(let index in box){
console.log(index);
console.log(Array.isArray(box));
// box[index].style=`background-color:red`;
// console.log(box[index].style);
// console.log(box[index],box[index].innerHTML);
}
// console.log(content,box);
// element.innerHTML="tag+内容"
// ### innerText
// ## 表单标签: value
// element.value
// 修改：标签表量名.value=new value
// document.getElementById("id名").value =new value
// document.getElementsByTagName("form").属性名
// 修改选择：
// dadio:
// document.getElementsByName
// var a=document.querySelectorAll("input[name='hobby']");
// a[0].checked=true;
// checkbox:
var myform=document.getElementById("myForm");
function loop(){
var arr=myform.hobby;
for(let item of arr){
console.log(arr);
item.checked=true;
}
}
loop()
// ## 标签属性
// element.getAttribute("属性名");
// # 添加HTML节点（增）
var box=document.getElementById("box");
var box2=document.getElementById("box2");
var box3=document.getElementById("box3");
var body=document.querySelector("body");
// ## 相关api
// ### document.createElement()
var ele=document.createElement("li");
ele.innerHTML="chan pin shuo ming"
ele.className="red";
ele.setAttribute("id","ssss");
// ### ele.appendChild:
// 将标签作为父级的最后一个标签
// box.appendChild(ele);
// ### ele.insertBefore(新节点,兄弟节点):
// 将新标签插入到指定的兄弟标签之前
body.insertBefore(ele,box2);
// body.insertBefore(box,box2);
// document.removeChild(element) 删除 HTML 元素
// var divs=document.getElementsByTagName("div");
// body.removeChild(divs[3]);
// document.replaceChild(新的节点，旧的节点)
</script>
事件
<script>
// ## 事件执行阶段
// ### 概念
// 是指一个事件的完整的生命周期
// -
// ### 事件的传播
// 一个事件发生后，会在子元素与父元素之间传播，分为三个阶段
// 第一阶段(捕获阶段)：有事件
// 第二阶段(目标阶段)：谁触发
// 第三阶段(冒泡阶段)：执行事件
// ## 执行过程
// 捕获阶段
// DOM树加载
// 目标阶段
// 事件的起源
// 冒泡阶段
// 事件监听
// element.addEventListener(event, function, useCapture);
// 第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
// 第二个参数是当事件发生时我们需要调用的函数。
// 第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
// 注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"
// addEventListener() 方法为指定元素指定事件处理程序。
// addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
// 您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。
// 您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
// addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
// 当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
// 您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
// event.stopImmediatePropagation();停止事件传播
event.stopPropagation();//停止事件传播，但不停止自身事件传播
// ## 取消默认行为
// 应用场景阻止默认a跳转页面，或者是form表单中提交
// onclick=function(){event.defaultPrevented()}
</script>
<script>
var log=console.log;
var tagUl=document.getElementById("tagUl");
// tagUl.addEventListener("click",function(event){
// // event.stopImmediatePropagation();停止事件传播
// event.stopPropagation();//停止事件传播，但不停止自身事件传播
// log(event);
// },true);
// tagUl.addEventListener("click",function(event){
// // event.stopPropagation();
// log(event);
// },true);
function sub(event){
event.defaultPrevented();
}
function msg(str,event){
log(str);
// event.stopPropagatio
// n();
event.stopImmediatePropagation();
// this.event.stopPropagation();
console.log(this,event);
}
</script>
location
<script>
// window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面
// URL:统一资源定位符，本名网址
var loc =window.location.href;
console.log(loc);
// #的涵义
// #代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。
// 为网页位置指定标识符，有两个方法。一是使用锚点，比如<a name="print"></a>，二是使用id属性，比如<div id="print">。
// 版权声明：本文为CSDN博主「zlingyun」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
// 原文链接：https://blog.csdn.net/zlingyun/article/details/83536589
// 属性：
// protocol 协议(http,https)
// hostname 域名 (ip)
// port 端口号
// pathname 文件路径
// search 参数
// 方法：
window.location.reload()//重新加载当前文件(刷新)不会增加历史记录
// window.location.assign("跳转指定页面") 方法加载新文档。会增加历史记录
// window.location.replace("跳转指定页面") 方法加载新文档。不会增加历史记录
// 用户登录应用
window.location.href//获取完整网址
window.location.protocol//获取协议
window.location.hostname//获取域名
window.location.pathname//文件路径
window.location.search//参数
window.location.reload()//刷新
window.location.assign()//跳转指定页面，会增加历史记录
window.location.replace()//替换当前页面，不会增加历史记录
</script>
// 浏览器对象模型（Browser Object Model (BOM)） // 整个浏览器窗口，我们可以运用该对象里的api来控制标签页，比如刷新、前进、后退、改变页面地址、检测浏览器设备类型等操作。
// 所有浏览器都支持 window 对象。它代表浏览器的窗口。
// 所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
// 全局变量是 window 对象的属性。
// 全局函数是 window 对象的方法。
// 这两个属性都以像素返回尺寸：
var x=window.innerHeight;
var y=window.window.innerWidth;
// window.outerHeight
// 返回窗口外部的高度
// window.outerWidth
//返回窗口外部的宽度
// document 返回网页，只读
// window.innerHeight - 浏览器窗口的内高度（以像素计）
// window.innerWidth - 浏览器窗口的内宽度（以像素计）
// 浏览器窗口（浏览器视口）不包括工具栏和滚动条。
// window.open(URL,name,specs,replace) - 打开新窗口
// name | 可选。指定target属性或窗口的名称。支持以下值：<br />\_blank - URL加载到一个新的窗口。这是默认<br />\_parent - URL加载到父框架<br />\_self - URL替换当前页面<br />\_top - URL替换任何可加载的框架集<br />*name* - 窗口名称 |
// specs | 可选。可写属性如width,heigth,top,left...单位不用写，系统自带
// replace | 可选。true/false.true在历史记录中替换当前历史
function fun(){
window.open("https://www.baidu.com","_blank","width=200,height=200,left=200,top=200");
}
// window.close() - 关闭当前窗口
// 只能关闭自身的窗口
// window.moveTo() -移动当前窗口
// window.resizeTo() -重新调整当前窗口
