·#DOM
什么是DOM：文档对象模型，一份html文件在js中就是一个DOM对象（document对象）
BOM是包含DOM的
节点的概念：组成一份DOM文档的所有内容都是DOM的节点，包括但不仅限于：标签、空格、换行、注释、标签的属性、标签中嵌套的文本
节点属性的概念：用来描述节点特征的变量：nodeName\nodeType\nodeValue,这三种属性可以用来判断节点的类型
document中的节点特征
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 当页面渲染完毕时，执行的事件函数
window.onload = function () {
// 获取已经渲染的节点
// childNodes方法只能获取到当前节点下的一级子节点，嵌套的二级节点无法获取
// var nodes = document.childNodes;
// console.log(nodes);
// 获取到body标签的所有子节点
var nodes = document.body.childNodes;
var body = document.querySelector('#demo')
var nodes = body.childNodes;
console.log(nodes);
document.title = '百度一下'
}
</script>
</head>
<body id="demo">
<!--我是注释内容-->
<!--我是注释2-->
<p id='p1' class="p">一只乌鸦口渴了</p>
到处找水喝
</body></html>
document中的节点操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var p = document.querySelector('#p')
console.log(p.nextSibling);
//p.previousSibling
}
</script>
</head>
<body>
<p id='p'>一只乌鸦口渴了</p>
<span>呵呵呵呵呵呵</span>
</body>
<p>vnosvn</p>
</html>
文档写入操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 在页面正在渲染时，使用write方法向页面中写入数据，并不会影响已渲染出来的数据
// 当页面渲染完毕时，使用write方法向页面中写入数据，js会认为已渲染的数据作废，用write方法中的参数覆盖已渲染的数据
window.onload = function () {
document.write('hello world');
document.write('<h1>呵呵</h1>');
document.writeln('<h1>哈哈</h1>');
// 需要向哪个标签中写入数据，就是用该标签调用innerHTML属性
// var spanTag = document.querySelector('#span');
// 给标签赋值，可以使用innerHTML和innerText
// innerHTML中除了可以给标签设置普通字符串外，如果字符串中包含标签，标签会被解析出来（W3C规范，所有浏览器都可使用该方法）
// innerText中如果字符串包含了标签，则标签原样显示，并不会被解析（浏览器厂商联盟私自定义的方法，有兼容性问题）
// 获取标签中的值
// innerHTML:如果标签中嵌套有子标签，则会把这些标签当做字符转样式，连同文本一起输出
// innerText:如果标签中嵌套有子标签，则只获取标签里的文本。
// spanTag.innerHTML = '<a href="http://www.baidu.com">到处找水喝</a>'
//
// spanTag.innerText = "<a href='http://www.baidu.com'>到处找水喝</a>";
// console.log(spanTag.innerText);
//
// console.log(spanTag.outerHTML);
spanTag.outerHTML = '<p>hello</p>'
}
</script>
</head>
<body>
<p>一只乌鸦口渴了</p>
<span id=span><a href='http://www.baidu.com'>到处找水喝</a></span>
</body>
</html>
查找文档中的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#p {
color: red;
}
</style>
</head>
<body>
<p id='p'>一只乌鸦口渴了</p>
<p id='p'>到处找水喝</p>
<a class='link' href="#">百度一下</a>
<a class='link' href="#">新浪一下</a>
<a href="#">搜狗一下</a>
<input type="text" name="user" value="">
</body>
<script type="text/javascript">
// 查询标签的范围是整个html文件，也就是在document范围中搜索指定的标签，所以要使用document对象调用相关查找方法。
// 因为W3C协议规定id值唯一，所以通过id获取标签，只能获取一个标签，如果页面中出现同名id，则只获取匹配的第一个标签
var pTag = document.getElementById('p');
// console.log(pTag);
// 通过标签名获取标签：可以获取到页面中所有的同名标签
// 返回值是一个类似于数组的数据类型，把所有匹配到的标签按照先后顺序，利用下标管理起来。
var aTags = document.getElementsByTagName('a');
// console.log(aTags[0]);
// 通过class名获取标签
var linkTags = document.getElementsByClassName('link');
// console.log(linkTags);
// 通过name属性值获取input类型（form表单）的标签
var inputs = document.getElementsByName('user');
// console.log(inputs);
// 通过标签的选择器获取标签
// querySelector():不管页面中与参数匹配的标签有几个，只能拿到第一个匹配的标签
var tag = document.querySelector('.link');
// console.log(tag);
// querySelectorAll():可以获取到页面中所有与参数匹配的标签
var tags = document.querySelectorAll('.link');
console.log(tags);
</script>
</html>
标签常见属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
p {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p style="color:red;width:500px;height:500px">一只乌鸦口渴了</p>
</body>
<script type="text/javascript">
var pTag = document.querySelector('p');
// tagName属性：保存的是当前标签的名字
// console.log(pTag.tagName);
// 标签中的style属性：保存的是标签的样式信息（CSS代码）;
// 因为通过js访问的style属性是标签下的style属性，所以只能获取到行内的样式，如果该标签的样式是其他样式表设置的，则无法获取对应的值
console.log(pTag.style.width);
// 使用js给标签添加样式
// pTag.style = 'background-color:red'
// 如果要获取、修改的css样式是多个单词组成的，则需要转为驼峰法的命名形式
// 通过js修改、获取的CSS样式，是行内样式
pTag.style.backgroundColor = 'red'
</script>
</html>
网友评论