|
DOM树 |
| 概要 |
基本节点
文档节点
Document Node |
根节点Document
呼出: document
生成器
construction |
HTMLDocument |
| nodeType |
9 |
| nodeName |
"#document" |
| nodeValue |
null |
|
| 元素节点 |
生成器
construction |
HTMLElement |
| nodeType |
1 |
| nodeName |
大写的元素名 |
| nodeValue |
null |
|
| 属性节点 |
生成器
construction |
Attr |
| nodeType |
2 |
| nodeName |
属性名 |
| nodeValue |
属性值 |
|
| 文本节点 |
| 空白节点 |
半角空格，tab，改行等
html要素最开始和最后不生成空节点 |
生成器
construction |
Text |
| nodeType |
3 |
| nodeName |
"#text" |
| nodeValue |
文本内容, 字符串 |
|
| 注释节点 |
生成器
construction |
Comment |
| nodeType |
8 |
| nodeName |
"#comment" |
| nodeValue |
注释内容, 字符串 |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 节点对象的属性 |
注意: 不要这样子找节点,
空节点的存在影响结果！
一般用class和id来找
| parentNode |
呼出母节点
Document没有母节点，返回null |
| childNodes |
呼出所有子节点的类似数组的对象(NodeList) |
| firstChild |
呼出第一个子节点
没有返回null |
| lastChild |
呼出最后一个子节点
没有返回null |
| nextSibling |
呼出下一个兄弟节点(母节点相同) |
| previousSilbing |
呼出上一个兄弟节点 |
| nodeType |
说明节点的种类的数值
| 1 |
要素节点 |
| 3 |
文本节点 |
| 9 |
根节点Document |
|
| nodeValue |
|
| nodeName |
|
| |
|
|
| 表示html树的属性 |
无视文本节点，所以不会有空节点
| parentElement |
获取母元素 |
| children |
获取所有子元素的类似数组的对象(NodeList) |
| firstElementChild |
获取第一个子元素 |
| lastElementChild |
获取最后一个子元素 |
| nextElementSibling |
下一个兄弟元素 |
| previousElementSibling |
上一个兄弟元素 |
| childElementCount |
子元素的数量
相当于 children.count |
| |
|
| |
|
| |
|
|
| |
|
| |
|
|
节点对象(Node
Object)的取得 |
通过ID获取
单个 |
ID不能重复，所有可以获取特定的一个
| 函数 |
document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x(str); |
| 例 |
let id_test =
document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x('id-test'); |
| |
|
| |
|
| |
|
|
通过元素名获取
多个 |
不区别大小写
获取所有同类元素
| 函数 |
document.getElementsByTagName_r(str); |
| 例 |
let tag_test =
document.getElementsByTagName_r('h1'); |
| 注意 |
复数形式,不要漏了s
getElementsByTagName |
| |
参数"*"可以获取所有的子元素
document.getElementsByTagName_r("*"); |
| |
可以用于任何元素 |
返回的是NodeList, 只可读的类似数组的Object，带length
会实时变化
迭代时候复制成一个静态的
var divs =
document.getElementsByTagName_r("div");
var staticList = Array.prototype.slice.call(divs,
0); |
通过class名获取元素
多个 |
| 函数 |
document.getElementsByClassName(str); |
| 例 |
var color_test =
document.getElementsByClassName('color-test'); |
| |
复数形式,不要漏了s |
| |
|
| |
|
|
通过name获取元素
多个 |
| 函数 |
document.getElementsByName(str); |
| 例子 |
#
TODO: 暂略 |
| |
复数形式,不要漏了s |
| name属性 |
form, input这类控制表格的元素
img,map,object等
上述的可以设定 |
| |
|
|
| 用CSS选择器 |
| 函数 |
document.querySelectorAll(str); |
| 例 |
document.querySelectorAll("body>h1:first-child");
就是直接写css选择器 |
| 只选匹配的第一个 |
document.querySeletor(str); |
| |
不会实时变化 |
| |
|
|
| 接入用的属性 |
带[]的都是HTMLCollection对象，类似数组
| document.documentElement |
文档根元素(html)的参照 |
| document.head |
head的参照 |
| document.body |
body的参照 |
| document.forms[] |
|
| document.images[] |
img |
| document.anchors[] |
|
| document.applets[] |
html5以后是object标签 |
document.embeds[]
document.plugins[]
HTML5新增 |
embed |
document.scripts[]
HTML5新增 |
scirpt |
| |
|
|
| |
|
| |
|
| |
|
| |
|
|
属性值的获取与设定 |
| 元素的属性 |
《a id="😒" href="🐶"》😳随便做个测试《/a》
id="😒" 这种就是属性 |
| 元素对象的属性 |
区分大小写，小驼峰写法
直接【元素对象.属性名 】的话名字和html有不同，尽量用setAttribute()
| 获取属性 |
|
元素对象.属性名
例:
var sampe =document.getElementByIdx_x_x_x_x_x_x_x_x("test");
console.log(sample.className); |
| |
元素对象.getAttribute(str);
例:
console.log(sample.getAttribute("className")); |
|
| 设定属性 |
元素对象.属性名 = 新的值
例:
sample.className = "newClass" ; |
元素对象.setAttribute(属性名, 新的值);
例:
sample.setAttribute("className",
"newClass"); |
|
| 确认属性是否存在 |
元素对象.hasAttribute(属性名);
例:
sample.hasAttribute("href"); |
| 删除属性 |
元素对象.removeAttribute(属性名);
例:
sample.removeAttribute("href"); |
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 属性一览 |
只可读！
元素对象.attributes
p381 |
|
元素内容的取得与设定 |
| 元素的内容 |
| 元素内的HTML代码 |
元素对象.innerHTML |
| 元素内的文本 |
元素对象.innerText
或元素对象.textContent
注意: 包括所有子节点的文本！
两者区别
| |
innerText |
textContent |
| script内部文本 |
不返回 |
返回 |
空白字符串
"" |
删除 |
原样返回 |
table
tr, td等
表格要素 |
只可读 |
可读写 |
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
|
| 元素内的节点层次构造 |
搜本篇"节点对象的属性" |
|
| |
|
|
节点的生成，插入，删除 |
| 生成节点 |
| 函数 |
| 元素节点 |
document_createElement_x_x_x_x(元素名);
例
document_createElement_x_x_x_x("h1"); |
| 属性节点 |
document_createAttribute(属性名); |
| 文本节点 |
document_createTextNode(str);
例
document_createTextNode("这是一个文本节点"); |
| 注释节点 |
document_createComment(str); |
document
断片？
fragment |
document_createDocumentFragment(str); |
| 复制其他节点？ |
document.importNode(其他文档的节点, deep);
deep ---》 true 复制一直到子孙节点
---》 fakse 只复制兄弟节点 |
| |
|
| |
|
| |
|
| |
|
|
| |
|
|
| 插入节点 |
插入到元素的子节点的最后
插入到当前节点的前面
| 函数 |
节点.insertBefore(要插入的节点, 要素的子节点) |
| |
|
| |
|
| |
|
| |
|
# TODO: p388例子省略
如果插入的是现存的节点，则相当于移动该节点(老地方的被删除) |
| 删除节点 |
节点.removeChild(子节点)
注: 删除的是子节点
要删除自己:
node.parentNode.removeChild(node); |
| 替换节点 |
节点.replaceChild(新节点, 子节点)
注: 替换的是子节点
要替换自己: node.parentNode.replaceChild(newNode,
node); |
| |
|
| |
|
| |
|
|
元素的位置 |
| 表示元素位置的坐标系 |
| 视口坐标系 |
浏览器网页栏左上角为(0, 0) |
| 文档坐标系 |
html生成的文档的左上角为(0, 0) |
|
| 获取元素的位置与大小 |
var rect = 元素对象.getBoundingCientRect();
获得的信息不包括margin的量
返回的是ClientRect对象， 有如下属性
| left |
元素边框左上顶点的x坐标 |
| top |
左上顶点的y坐标 |
| right |
右下顶点的x坐标 |
| bottom |
右下顶点的y坐标 |
width
(IE 8不支持) |
宽 |
height
(IE 8不支持) |
高 |
| |
|
| |
|
| |
|
| |
|
|
| 获取视口的大小 |
| 不包含滚动条 |
document.documentElement.clientWidth
document.documentElement.clientHeight |
包含滚动条
IE9及以后 |
windows.innerWidth
windows.innerHeight |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 获取滚动量 |
| IE, Firefox |
| x方向 |
document.documentElement.scrollLeft |
| y方向 |
document.documentElement.scrollTop |
|
Chrome, Safari, Opera, Edge
各浏览器的Quirks Mode
(兼容模式) |
| x方向 |
document.body.scrollLeft |
| y方向 |
document.body.scrollTop |
|
Firefox,
Chrome,Safari,
Opera, IE9及以后
|
| x方向 |
document.pageXOffsef |
| y方向 |
document.pageYOffset |
|
| |
|
| |
|
|
| 滚动 |
滚动到指定位置
文档坐标系指定位置 |
window.scrollTo(x, y); |
| 滚动指定距离 |
window.scrollBy(x, y);
往右，下方向 |
| 滚动到指定元素位置 |
元素对象.scrollIntoView(alignWithTop);
alignWithTop ----》true 指定要素到视口顶端
----》false 指定要素到视口底端 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
改变元素位置和表现
(performation)
|
改变元素位置等layout相关的不属于渲染引擎最优化的范围，性能低下
实际开发只在必要时候进行layout的实时变动 |
| |
|
| |
|
|
HTML
Form |
| 表单 |
两种使用方式
| |
将输入结果送到服务器，由服务器处理后向用户反馈并保存到数据库 |
| |
由客户端JavaScript处理，处理用户输入输入的UI |
|
| 表单要素 |
p397 |
| 获取表单要素 |
获取表单
| DOM方法 |
document.getElementByIdx_x_x(str); |
| forms属性中 |
document.forms[0]
document.forms.form1 //通过ID
document.forms.questions //通过name
注: 获取所有带有相同名字的: document.questions |
| |
|
获取表单的子元素
| form里 |
form自身就是一个包含子元素的类似数组的对象
document.forms.form[0]
document.forms.form1.sample // name
document.forms.form1.menu1 //id |
| form的elements要素 |
document.forms.form1.elements[0]
document.forms.form1.elements.sample //name
document.forms.form1.elements.menu1 //id |
| |
|
| |
|
| |
|
|
| |
|
| |
|
|
CSS的控制 |
| CSS |
样式表 |
| |
# TODO: p400 略 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
