前语：可能大家一看就会觉得哇哦~好多字，可是兹莫办呢都要记住！
可能你拿起一本单词书印象最深张口就来的就是abandon,是为什么呢？因为重复
实践是检验真理的唯一标准结合实际深化记忆，才能做到下一句。。。
不是死记硬背，而是熟能生巧~
1. 查找元素:
一、不需要查找就可直接获得的元素对象: 4种:
document.documentElement —— <html>
document.head —— <head>
document.body —— <body>
document.forms[i] —— <form>
二、 节点间关系查找2种：
a. 父子关系:
1). 元素的父元素: 元素.parentElement或元素.parentNode
2). 元素下的所有直接子元素: 元素.children
3). 元素下的第一个直接子元素: 元素.firstElementChild
4). 元素下的最后一个直接子元素: 元素.lastElementChild
b. 兄弟关系:
1). 元素的前一个兄弟: 元素.previousElementSibling
2). 元素的后一个兄弟: 元素.nextElementSibling
三、HTML特征查找4种:
a. 按id查找: var 一个元素对象=document.getElementById("id名");
b. 按标签名查找: var 类数组对象=任意父元素.getElementsByTagName("标签名")、
c. 按class名查找: var 类数组对象=任意父元素.getElementsByClassName("class名")
d. 按name名查找表单元素: var 类数组对象=document.getElementsByName("name名")
四、如果通过复杂的查找条件，才能找到想要的元素时，就用按选择器查找: 2种
a. 只查找一个符合条件的元素: var 一个元素=任意父元素.querySelector("任意选择器")
b. 查找多个符合条件的元素: var 类数组对象=任意父元素.querySelectorAll("任意选择器")
2. 修改元素: 3种东西可修改
(1). 修改内容3种:
a.获取或修改元素的HTML内容
1). 元素.innerHTML
2). 获取时: 返回原始HTML内容
3). 修改时: 先将新内容交给浏览器编译，再显示给人看
b. 获取或修改元素的纯文本内容:
1). 元素.textContent
2). 获取时: 返回去掉内嵌标签，将特殊符号翻译为正文后的纯文本
3). 修改时: 不会将新内容交给浏览器编译，而是原样显示给人看
c. 获取或修改表单元素的值: 表单元素.value
(2). 修改属性: 3种
a. 字符串类型的HTML标准属性: 2种:
1). 旧核心DOM: 4个函数
i. 元素.getAttribute("属性名");
ii. 元素.setAttribute("属性名", "属性值")
iii. var bool=元素.hasAttribute("属性名")
iv. 元素.removeAttribute("属性名")
优点: 万能, 缺点: 繁琐
2). 新HTML DOM:
i. 元素.属性名
ii. 元素.属性名="属性值"
iii. 元素.属性名!==""
iv. 元素.属性名=""
优点: 简单, 缺点: 不万能
b. bool类型的HTML标准属性：
1). 不能用旧核心DOM4个函数修改
2). 只能用HTML DOM的"元素.属性名"方式获取或修改，且值为bool类型
c. 自定义扩展属性:
1) HTML中: <元素 data-自定义属性名="属性值">
2). js中: 2种: （不能用.访问）
i. 核心DOM:
var 属性值=元素.getAttribute("data-自定义属性名")
元素.setAttribute("data-自定义属性名","属性值")
ii. HTML5标准: 元素.dataset.自定义属性名
(3). 修改样式:
a. 修改元素的内联样式:
元素.style.css属性="属性值"
b. 获取元素的完整样式:
var style=getComputedStyle(元素对象);
style.css属性
计算后的样式都是只读的
c. 批量修改元素的样式时，都用class:
元素.className="class名"
总结: 不要背英文名字！反而应该记中文能做哪些事儿！
3. 添加/删除元素:
(1). 只添加一个新元素: 3步
a. 创建一个新元素:
var 新元素=document.createElement("标签名")
b. 为元素设置关键属性:
新元素.属性名="属性值";
c. 将新元素添加到DOM树: 3种:
1). 末尾追加:
父元素.appendChild(新元素)
2). 在某个元素前插入:
父元素.insertBefore(新元素, 现有元素)
3). 替换某个元素:
父元素.replaceChild(新元素, 现有元素)
(2). 优化: 尽量减少操作DOM树的次数，2种:
a. 如果同时添加父元素和子元素，应该先将子元素添加到父元素，最后再将父元素一次性添加到DOM树
b. 如果父元素已经在页面上，要添加多个平级子元素。应该利用文档片段对象
1). 创建文档片段对象:
var frag=document.createDocumentFragment()
2). 将子元素添加到文档片段对象中:
frag.appendChild(子元素)
3). 最后将文档片段对象一次性添加到DOM树上父元素下
父元素.appendChild(frag);
(3). 删除元素: 父元素.removeChild(子元素)
4. HTML DOM常用对象:（了解即可）
(1). var img=new Image()
(2). table
a. table管着行分组:
1). 添加行分组:
var thead=table.createTHead()
var tbody=table.createTBody()
var tfoot=table.createTFoot()
2) 删除行分组:
table.deleteTHead(); table.deleteTFoot()
3). 获取行分组:
table.tHead table. tFoot table.tBodies[i]
b. 行分组管着行:
1). 添加行:
i. 任意行插入新行: var tr=行分组.insertRow(i);
ii. 开头插入新行: var tr=行分组.insertRow(0)
iii. 末尾追加新行: var tr=行分组.insertRow()
2). 删除行:table.deleteRow(tr.rowIndex)
3). 获取行: 行分组.rows[i]
c. 行管着格:
1). 添加格: var td=tr.insertCell()
2). 删除格: tr.deleteCell(i)
3). 获取格:tr.cells[i]
(3). form:
a. 获取form元素:document.forms[i]
b. 获取form中的表单元素:
1). 标准: form.elements[i或id或name名]
2). 简写: 如果有name属性: form.name名
c. 让表单元素自动获得焦点:表单元素.focus()
BOM:
1. window:
(1). 获得窗口大小:
a. 获得完整窗口大小:
window.outerWidth和window.outerHeight
b. 获得文档显示区大小:
window.innerWidth和window.innerHeight
(2). 打开和关闭窗口:
window.open()和window.close()
打开新链接4种方式:
(1). 在当前窗口打开，可后退
a. html: <a href="url" target="_self">
b. js: window.open("url", "_self");
(2). 在当前窗口打开，禁止后退
location.replace("新url")
(3). 在新窗口打开，可同时打开多个
a. html: <a href="url" target="_blank">
b. js: window.open("url", "_blank");
(4). 在新窗口打开，只能打开一个
a. html: <a href="url" target="自定义窗口名">
b. js: window.open("url", "自定义窗口名")
3. history:
前进: history.go(n) 后退: history.go(-n) 刷新: history.go(0)
4. location:
(1). 属性: 分段获得url中各个部分:
a. location.href 完整url
b. location.protocol 协议
c. location.host 主机名+端口号
d. location.hostname 主机名
e. location.port 端口号
f. location.pathname 相对路径
g. location.search ?及其之后的查询字符串参数列表
h. location.hash #锚点地址
(2). 方法:
a. 在当前窗口打开，可后退：
location.assign("新url") 或 location.href="新url"
b. 在当前窗口打开，禁止后退:
location.replace("新url")
c. 刷新: location.reload();
5. navigator
(1). 查看浏览器的名称和版本号: navigator.userAgent
(2). 查看浏览器中安装的插件列表: navigator.plugins
事件:
- 绑定事件: js中:
(1). 一个事件只绑定一个处理函数
元素.on事件名=function(){ ... }
(2). 一个事件绑定多个处理函数
元素.addEventListener("事件名", 事件处理函数)
(3). 移除一个事件监听:
元素.removeEventListener("事件名", 原事件处理函数对象) - 事件模型: 捕获，目标触发，冒泡
- 事件对象:
(1). 获得事件对象:
元素.on事件名=function(e){ ... }
(2). 阻止冒泡:e.stopPropagation()
(3). 当多个子元素都要绑定相同事件时，利用冒泡/事件委托3步:
a. 事件只在父元素上绑定一次
b. e.target代替this
c. 判断e.target的任意特征是否是我们想要的元素
(4). 阻止元素默认行为:
e.preventDefault()
(5). 获取鼠标位置:
a. 相对于屏幕左上角的x，y坐标:
e.screenX, e.screenY
b. 相对于文档显示区左上角的x，y用坐标:
e.clientX, e.clientY
c. 相对于事件所在元素左上角的x，y坐标:
e.offsetX e.offsetY
(6). 页面滚动事件:
window.onscroll=function(){
var scrollTop=document.documentElement.scrollTop||
document.body.scrollTop
//如果scrollTop>多少，就执行xx操作
//否则就恢复原样
}
3740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
