javascript 学习 —— BOM和DOM编程学习
这是我的第一个博客，用来记录自己的学习历程。之前的学习会在项目下写备注，再次翻看也有些不方便。从今天开始就用博客记录吧。
一、BOM ( browser object model ) 与DOM
1.在学习DOM之前总听到BOM这个概念，什么是BOM呢？ BOM全称 Browser Object Model，浏览器对象模型。 JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
2.BOM与DOM有什么关系呢？ 我们知道javaScript 可以分为两部分 EMCAScript（基本语法）和 BOM( Browser Object Model) 浏览器对象模型.window 其实就是BOM的对象，docunment 是DOM
二、BOM
1.BOM常用的属性
部分使用方法如下：
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
2.BOM常用函数
部分使用如下(在js文件中 window可写可不写)
window.alert();
clearInterval();
window.config();
setTimeout();
3.window Location对象
window.location 对象在编写时可不使用 window 这个前缀
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 （80 或 443）
- location.protocol 返回所使用的 web 协议（http:// 或 https://）
-
location.href 属性返回当前页面的 URL。
4.window History
- hisatory.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击按钮向前相同
- history.go() -与在浏览器点击后退按钮相同 / 与在浏览器中点击按钮向前相同，可加入正整数或负整数 表示前进或后退几步
以上只是常用的对象或方法(可参考w3School)链接：https://pan.baidu.com/s/1V6qCfIcHMyYs-FE8xLY3Sw 提取码：a9y6
三、DOM
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<a href=""></a>
<h1>我是文本</h1>
</body>
</html>
1.DOM 节点
元素节点 element node : 标签
属性节点 attribute node ： 如href name value
文本节点 text node : <h1></h1> 中的 我是文本
2.DOM上下级的关系
父子关系（parent-child）
兄弟关系（slibing）
3.DOM的操作类容
3.1查询元素
1.定点查询
document.getElementById(""); 返回一个访问对象
getElementsByTagName("");返回一组 通过tagname 查询的对象
getElementsByName(""); 返回一组 通过name 查询的对象
2.间接查询
父节点： parentNode
孩纸节点 ： childNodes fristChild(第一个孩子节点) lastChild（最后一个孩子节点）
兄弟节点：previousSlibling nextSlibling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查找element</title>
</head>
<body>
<form action="#" method="get">
用户名：<input type="text" placeholder="请输入用户名" id = "username"><br>
密 码：<input type="password" placeholder="默认为123456" id = "password"><br>
性 别：<label><input type="radio" name="sex" >男
<input type="radio" name="sex">女
<!--默认选中 保密-->
<input type="radio" name="sex" checked="checked">保密
</label><br>
爱 好：<label><input type="checkbox" name="hobby" id = "1">运功
<input type="checkbox" name="hobby" id = "2">旅游
<input type="checkbox" name="hobby" id="3">阅读
<input type="checkbox" name="hobby" id="4">摄影
</label><br>
地 址：<label><select name="city" id="city" >
<!--默认选中广州-->
<!--<option value="gz" selected="selected">广州</option>-->
<option>请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select></label><br>
上传头像：<input type="file"><br>
个人简介：<br>
<label><textarea cols="20" rows="5">不少于10字</textarea></label><br>
<input type="submit" value="提交"> <input type="reset" value="重置">
</form>
</body>
</html>
<script src="../js/element.js"></script>
//查询指定ID元素对象
var user = document.getElementById("username"); //单个
console.log(user.nodeType);
console.log(user);
var hobby = document.getElementsByName("hobby");//指定name 获得多个元素对象
for(var i =0 ; i<hobby.length; i++){
console.log(i+":"+ hobby.item(i));
}
var hobby = document.getElementsByTagName("input");//指定元素 获取多个元素对象
console.log(hobby.length);
var opt = document.getElementById("city");
var city = opt.childNodes; //获取孩子节点 但是 空白和注释都算作 孩子节点
console.log(city.length);
for(var i =0;i<city.length;i++){
console.log(city.item(i));
}
var child = document.getElementById("2");
console.log(child.previousElementSibling.nodeType); //获取兄弟(只含元素)节点 的 type
console.log(child.parentNode.nodeName); //获取父亲 节点的 name
/*
document.getElementById("");
getElementsByTagName("");
getElementsByName("");
childNodes
parentNode
previousElementSibling
*/
3.2操作属性
方法一：以键值对的方法 setAttribute(属性名，属性值), getAttribute(）
方法二： 以半角句号 的 形式修改属性 ‘ . ’ 对象.属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-操作属性</title>
<script>
function func1(){
//得到的图片
var img = document.getElementById("img");
//修改图片的src属性
img.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1104642158,1544670491&fm=26&gp=0.jpg";
//修改图片的title
img.title = "绝地求生";
}
function func2(){
//获取超链接
var a1 = document.getElementById("a1");
//修改超链接的文本(不是属性)
a1.innerText = "京东";
//修改超链接的herf
a1.href = "http://www.jd.com";
//修改超连接的target 属性
a1.target = "_self";
}
</script>
</head>
<body>
<img id="img" src="http://img3.imgtn.bdimg.com/it/u=3721871264,4279506929&fm=26&gp=0.jpg" alt="" title="lol"><br>
<a id = "a1" href="http://www.taobao.com" target="_blank">淘宝</a><br>
<input type="button" value="func1" οnclick="func1()"><br>
<input type="button" value="func2" οnclick="func2()"><br>
</body>
</html>
<!--
修改属性 ：
获取对象
1. 以键值对的方法 setAttribute(), getAttribute()
2. 以半角句号 的 形式修改属性 ‘ . ’ 对象.属性
-->
3.3操作文本
对于<p> <hn> <div> <span> 的标签的内部文本可以使用innerHtml innerText
1.innerHtml:从对象的起点到对象的终点 包括标签
2.innerText：从对象的起点到对象的终点 仅限文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-操作文本</title>
<script>
function func1(){
//取出div1的文本 innerHtml
var div1 = document.getElementById("div1").innerHTML;
console.log(div1)
//取出div1的文本 innerText
var div2 = document.getElementById("div2").innerText;
console.log(div2)
}
</script>
</head>
<body>
<div id="div1" style="border: 1px solid red;background-color:green;">
<h3>测试操作文本</h3>
</div>
<div id="div2" style="border: 1px solid red;background-color: blue;">
<h3>测试操作文本</h3>
</div>
<input type="button" value="func1" οnclick="func1()">
</body>
</html>3.4操作元素
创建节点的方法
document.createElement()
加入节点的方法
appendChid(chidElement) :末尾追加方式插入节点
parentNode.insertBefore(newNode,beforeNode):在指定节点前插入新节点
删除节点的方法
parentNode.removeChild(childNodes)
替换节点的方法
parentNode.replaceChild(newNode,oldNode)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function removeFileItem(){
//获取删除的对象
var fa = this.parentNode.parentNode;
console.log(fa);
fa.parentNode.removeChild(fa);
}
function addFileItem(){
// <tr>
// <td></td>
// <td>
// <input type="file" name = "photo" id = "photo"/>
// <input type="button" value="删除" οnclick="removeFileItem()">
// </td>
// </tr>
/*
需要添加如上表格
*/
//1.创建 input 并设置属性
var input1 = document.createElement("input");
input1.type = "file";
input1.name = "photo";
input1.id = "photo";
console.log(input1);
var input2 = document.createElement("input");
input2.type = "button";
input2.value="删除";
input2.οnclick= removeFileItem;
console.log(input2);
//2.创建 <td> 并把<input> 加入进来
var td1 = document.createElement("td");
td1.appendChild(input1);
td1.appendChild(input2);
console.log(td1);
//3.创建同级 <td>
var td2 = document.createElement("td");
td2.innerHTML = "";
//4.创建<tr> 并加入 <td>
var tr = document.createElement("tr");
tr.appendChild(td2);
tr.appendChild(td1);
console.log(tr);
//5.把 <tr> 加入table
//5.1 获取最后一个<tr>对象
var lastTr = document.getElementById("lastrow");
//5.2 加入table
lastTr.parentNode.insertBefore(tr,lastTr);
console.log(lastTr);
}
</script>
</head>
<body>
<h3>注册用户</h3>
<form action="" >
<table id="table"border = "1" width = "40%">
<tr>
<td>用户名</td>
<td><input type="text" name = "username" id = "username" value="请输入名字 "></td>
</tr>
<tr>
<td>照片</td>
<td>
<input type="file" name = "photo" id = "photo"/>
<input type="button" value="添加" οnclick="addFileItem()">
</td>
</tr>
<tr id = "lastrow">
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
<!--
创建节点的方法
document.createElement()
加入节点的方法
appendChid(chidElement) :末尾追加方式插入节点
parentNode.insertBefore(newNode,beforeNode):在指定节点前插入新节点
删除节点的方法
parentNode.removeChild(childNodes)
替换节点的方法
parentNode.replaceChild(newNode,oldNode)
-->
推荐阅读
-
javascript学习教程（免费学编程的网站）
-
python网络编程学习笔记(八)：XML生成与解析（DOM、ElementTree）
-
python网络编程学习笔记(七)：HTML和XHTML解析(HTMLParser、BeautifulSoup)
-
想学习javascript JS和jQuery哪个重要 先学哪个
-
JavaScript学习笔记之DOM基础操作实例小结
-
学习ASP和编程的28个观点
-
浅谈JavaScript_DOM学习篇_图片切换小案例
-
JavaScript学习和使用之函数声明和函数表达式的区别
-
javascript学习教程（免费学编程的网站）
-
深入学习JavaScript中的bom