HtmlDom
DOM(document object model)
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。
W3C DOM分为三个部分：
- Core DOM---所有文档类型的标准模型
- XML DOM---XML文档的标准模型
- HTML DOM---HTML文档的标准模型
HTML DOM
HTML DOM就是专门针对html文档的标准模型
DOM中定义的html对象
元素对象
document.documentElement 返回<html>元素
document.head
document.title
document.body
document.scripts
document.forms 返回所有 <form> 元素
document.images 返回所有<img>元素
document.anchors 返回所有拥有name属性的<a>元素
document.links 返回拥有href属性的所有<area>和<a>元素
document.embeds 返回所有 <embed> 元素
document.applets 返回所有<applets>元素，html5不建议使用
文档信息对象
document.baseURI 返回文档的绝对基准 URI
document.documentURI 返回文档的 URI
document.URL 返回文档的完整 URL
document.referrer 返回引用的 URI（链接文档）
document.domain 返回文档服务器的域名
document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype doctype:文档类型，比如<!DOCTTYPE html>
document.inputEncoding 返回文档的编码（字符集）
document.lastModified 返回文档更新的日期和时间
document.readyState 返回文档的（加载）状态
document.strictErrorChecking 返回是否强制执行错误检查
document.implementation 返回 DOM 实现
document.domConfig 废弃。返回 DOM 配置
document.documentMode 返回浏览器使用的模式
元素操作
FIRST
对元素的所有操作都是建立在获取了元素之上的
获取元素（查找元素）
- document.getElementById(id)
- document.getElementsByTagName(name)
- document.getElementsByClassName(name)
- document.querySelectorAll();
参考-css选择器
<!DOCTYPE>
<html lang="en">
<head><title></title></head><body style="background-color: #C7EDCC;">
<p class="example">我是p</p>
<div class="example">hello how are you</div>
<div class="example">hello how are you</div>
<script>
var div = document.querySelectorAll('div.example');
// 注意与 document.getElementsByClassName("example") 的区别，这里的类名不用加 '.'
// 同时它也只能选择类，不能再进一步选择为div
div[0].style.color = 'red';
</script>
</body>
</html>
改变元素 (以下对元素的改变都是只能针对单个元素操作的)
- element.innerHTML = new html content
<!DOCTYPE>
<html lang="en">
<head><title></title></head><body style="background-color: #C7EDCC;">
<div>
<div>
</div>
</div>
<div></div>
<script>
var div = document.getElementsByTagName('div');
div[1].innerHTML = "<p>ok</p>"; // 在第一个div的子div里插入了<p>ok</p>
</script>
</body>
</html>
- element.attribute = new value
<!DOCTYPE>
<html lang="en">
<head><title></title></head><body style="background-color: #C7EDCC;">
<img id="imgo" src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575776298054&di=f0e093f594283097934b2f2c162d004b&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20131212%2Fsy_51552288528.jpg">
<script>
var img = document.getElementsByTagName('img');
img[0].src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575776298054&di=8c35e6bb7f0195a45ba96b4a28e5a048&imgtype=0&src=http%3A%2F%2Fdl.ppt123.net%2Fpptbj%2F201603%2F2016030410190920.jpg";
//注意： img.src = "",改变不了任何属性，但是也不会报错
//所以： 属性操作是针对单个元素的？
</script>
</body>
</html>
- element.setAttribute(attribute, value)
- element.style.property = new style
<!DOCTYPE>
<html lang="en">
<head><title></title></head><body style="background-color: #C7EDCC;">
<div>hello how are you</div>
<script>
var div = document.getElementsByTagName('div');
div[0].style.color = 'red';
</script>
</body>
</html>
添加、删除元素
- document.createElement(element)
- document.appendChild(element)
- document.removeChild(element)
- document.replaceChild(element)
添加事件处理程序
- document.getElementById(id).onclick = function()
- document.write(text)
CSS选择器
1.元素选择器
元素选择器也叫类选择器，例如
- h1
- a
- div
元素选择器同样也可以设置xml文档中元素的样式
2.通配符选择器 *
- 表示可以与任意元素匹配
- {color: red} 表示所有元素的color都是red
3.类选择器
.important {color: red;}
4.id选择器
#important {color: red};
id选择器在一个文档中只能使用一次
5.属性选择器
*[title] {color: red;}
a[href] {color: red;}
a[href][title] {color: red} //表示选择了同时具有href和title属性的<a></a>标签
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} // 还可以为属性加上值
- 注意事项
- p[class = "important warning"]{}
该选择器只对
<p class = "important warning">
起作用，对
<p class = "important">
不会起作用，也就是说属性值要完全对应
- p[class ~= "important"]{}
表示只要包含有属class性值important都会被选择
p[class ~= "important warning"]{} 应该是不合法的，没有任何效果
<!DOCTYPE>
<html lang="en">
<head>
<title></title>
<style type="text/css">
p[class = "important warning"]{
color: red;
}
p[class ~= "important"]{
font-weight: bold;
}
p[class ~= "important warning"]{
font-size: 20px;
}
</style>
</head>
<body style="background-color: #C7EDCC;">
<p class="important warning">我是important and warning</p> <!-- 样式是：红色加重-->
<p class="important">我是important</p> <!--样式是：黑色加重-->
<p class="important warning other">我是important and warning and other</p> <!--样式是：黑色加重-->
</body>
</html>
- PS:属性选择器同样在xml文档中可以起到重要作用
6.子串匹配属性选择器
a[href ^= "w3school"]{} // 选择href属性值以w3cshool开头的a元素
a[href $= "w3school"]{} // 选择href属性值以w3cshool结尾的a元素
a[href *= "w3school"]{} // 选择href属性值含有w3cshool的a元素
7.特性属性选择器
a[href |= "aaa"]{} // 表示选择属性值是aaa或者以aaa开头的a元素，注意与 ^= 的区别
可以选择
<a href = "aaa"></a>
<a href = "aaa-bbb"></a>
不可以选择
<a href = "aaabbb"></a>
8.后代选择器
div p{}
选择了div中含有的所有后代p，不管p是否是div的直接子后代，如下：
<div>
<div><p></p></div>
<p></p>
</div>
上面的所有p元素都会被选上
9.子选择器
div>p{}
10.相邻兄弟选择器
h1+p{}
11.伪类
纵观伪类，它都是对已有选择的一种修饰,例如：
p:first-child，它选择的是p元素，而且这个p元素必须为某个元素的子元素，所以可以如下写：
div>p:first-child 用来选择div中的第一个直接子元素p
锚伪类：
a:link
a:visited
a:hover
a:active
其它伪类：
p:first-child // 选择的是作为某个元素的第一个子元素的p，如下
<div>
<p><p>
<p><p>
<div>
<div>
<p><p>
<p><p>
<div>
每个div中的第一个p元素都会被选择
q:lang(no) // 选择的是
<q lang = "no"></q>
12.伪元素选择器
p:first-line // 选择的是p中文本的首行
P:first-letter // 选择的是文本的首字母
div:before{content:url(logo.gif);} // 在div内容前面插入一张图片
div:after{content:url(logo.gif);} // 在div内容后面插入一张图片
CON: 伪类和伪元素的区别就是：伪元素是用来选择某个标签里面的某个位置的内容，而伪类选择的任然还是元素
选择器分组
h1,a,div {color: red;} // 表示分别选择了h1,a,div来进行属性设置
元素+类
p.improtant {color: red;} // 选择了含有important类的p元素
多类选择器
.important.warning {color: red;} // 选择了既含有important类又含有warning类的元素
<!DOCTYPE>
<html lang="en">
<head>
<title></title>
<style type="text/css">
.important.warning {
color: red;
}
.important,.warning {
font-weight: bold;
}
</style>
</head>
<body style="background-color: #C7EDCC;">
<p class="important warning">我是important and warning</p> //样式是：红色加重
<p class="important">我是important</p> //样式是：红色
</body>
</html>
PS:注意区分".important.warning" 和 ".important,.warning"的区别:
- .important.warning 选择的是同时包含这两个类的元素如下：
<p class = "important warning">aaa</p>
<p class = "important warning other">bbb</p>
这两个都会被.important.warning选择
- .important,.warning{} 其实就是相当于:
.important {
color: red;
}
.warning {
color: red
}
上面两个合起来写，更方便
DOM节点
节点与元素
节点：HTML 文档中的所有事物都是节点，元素使也是节点中的一种
- 整个文档是文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 所有注释是注释节点
节点间的导航
- parentNode
- childNotes[nodenumber]
- firstChild 注
- lastChild
- nextSibling
- previousSibling
节点的属性
- nodeName
nodeName 是只读的
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document - nodeValue
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值
- nodeType
nodeType 属性返回节点的类型。nodeType 是只读的。
节点操作
- 创建节点
var p = document.createElement("p"); // 创建元素节点
var node = document.createTextNode("文本"); // 创建文本节点
- 追加节点
// 接着上面的 创建节点
p.appendChild(node)
- 插入节点
parentNode.insertBerfore(newNode,childNode); // 只能用来插入元素节点 - 删除元素节点
parent.removeChild(child);
node.remove(); // 不推荐使用该方法，浏览器支持糟糕
CON: 要想删除一个元素节点，必须知道它的父节点，所以操作有点繁琐，如下：
child.parentNode.removeChild(child);
- 替换元素
parentNode.replaceChild(newNode,childNode)
访问完整文档
-
document.body - 文档的body
-
document.documentElement - 完整文档
-
<a id = "insertBefore">insertBefore</a>
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一段文字。</p>
<p id="p2">这是另一段文字。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新的文本。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>
</body>
</html>
childnodes等属性
- 元素中的空格、换行符都会被认为是子节点，如下
c[0]是空格，c[3]也是空格，c[1]才是p元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d">h
<p>我是<b>p的</b>段落</p>
</div>
</body>
<script type="text/javascript">
var c = document.getElementById("d").childNodes;
console.log(c[1].innerHTML);
</script>
</html>
- 同理,nextSibling
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d">h
h<p>我是<b>p的</b>段落</p>
</div>
<p>你好</p>
</body>
<script type="text/javascript">
var c = document.getElementById("d").nextSibling.nextSibling;
console.log(c.nodeName); // p
</script>
</html>
- firstChild、lastChild、previousSibling
- 猜想：当对代码进行压缩时，这些属性得出的结果会改变？所以尽量少用？
- 提示：对节点的操作千万不要忽略了文字节点
兼容性问题
类选择器
在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器
有趣的
element.addEventListener(event, function, useCapture)
响应式布局
window.addEventListener('resize', function () {
console.log('浏览器宽度：' + window.innerWidth);
console.log('浏览器宽度：' + window.innerHeight);
});
浙公网安备 33010602011771号