JS中的DOM对象
DOM对象
1. DOM树
当网页被加载时，浏览器会建立页面的文档对象模型（Document Object Model），经过 HTML DOM对象，可访问 JavaScript HTML 文档的全部元素。数组
HTML DOM 模型被构造为对象的树。浏览器
节点(Node)：HTML文档中的全部内容均可以称之为节点，包含元素节点、属性节点、文本节点、注释节点和文档节点。cookie
文档(Document)：就是指HTML或者XML文件。dom
元素(Element)：HTML文档中的标签能够称为元素。jsp
2. 获取HTML元素
一般，经过 JavaScript，须要找到要操做的 HTML 元素。函数
经过 id 找到 HTML 元素
经过标签名找到 HTML 元素
经过类名找到 HTML 元素
经过id来找到 HTML 元素效率高，推荐使用。.net
2.1 经过 id 获取元素
使用实例：查找 id=“box” 元素：code
var box = document.getElementById("box");
若是找到该元素，则该方法将以对象（在 box 中）的形式返回该元素。
若是未找到该元素，则 box 将包含 null。orm
2.2 经过类名获取元素
使用实例：查找文档中全部 class=“box” 元素：对象
var box = document.getElementsByClassName("box");
注意：经过标签名获取到的对象是一个数组，不能直接当成标签使用！
2.3 经过标签名获取元素
使用实例：查找文档中全部的
元素：
var obj = document.getElementsByTagName("p");
注意：经过标签名获取到的对象是一个数组，不能直接当成标签使用！
3.入口函数
window.onload是在dom文档树加载完和全部文件加载完以后执行一个函数，也称为入口函数。
若是在body的script中获取获取文档中的HTML元素，就必须在window.onload中执行该操做，否则将没法成功的获取到HTML元素。
<script>
window.onload = function () {
var obj = document.getElementById("box");
alert("获取#box元素成功");
}
</script>
注意：一个文档中只能有一个入口函数。
4. document文档
4.1 获取元素节点
document.body
document.body获取文档中的 body 元素。
document.links
document.links获取文档中的全部 a 元素，返回的结果是一个数组。
document.images
document.images获取文档中的全部 img 元素，返回的结果是一个数组。
document.forms
document.forms获取文档中的全部 forms 表单，返回的结果是一个数组。
document.all
document.all获取文档中的全部元素，返回的结果是一个数组。
4.2 document其余操做
document.cookie
document.cookie 返回当前页面存放的cookie值，cookie就是本浏览器的一个数据存储技术（后面的课程会细讲）。
document.domain
document.domain 返回的就是当前网页的域名。
document.title
document.title 返回当前
document.URL
document.URL 返回当前页面的全地址。
document.referrer
document.referrer 返回当前页面是从哪一个一页面跳转过来的。
4.3 document表单操做
针对表单的元素节点的获取，咱们还能够经过form元素中的name属性来快速找到该from元素，语法：document.from的name属性值
<body>
<form action="login.jsp" name="login">
<input type="text" name="userName">
<input type="password" name="password">
<input type="submit" value="提交" name="submit">
</form>
<script>
// 获取name属性值为“login”的form元素
var form = document.login;
</script>
</body>
获得from元素中的“表单域元素”和“表单按钮”元素也能够用name属性来获取，语法：from元素.子元素name属性值。
<body>
<form action="login.jsp" name="login">
<input type="text" name="userName">
<input type="password" name="password">
<input type="submit" value="提交" name="submit">
</form>
<script>
// 获取name属性值为“login”的form元素
var form = document.login;
// 获取普通文本域标签
var userName = form.userName;
// 获取密码框标签
var userName = form.password;
// 获取登陆按钮标签
var submit = form.submit;
</script>
</body>
来源：https://blog.csdn.net/qq_44013790/article/details/86499658
- 1. JS中的DOM对象
- 2. js中的Dom对象
- 3. JS中的BOM、DOM对象
- 4. JS & DOM 对象
- 5. js--dom对象
- 6. 31、js的dom对象
- 7. 细看JS中的BOM、DOM对象
- 8. js中的DOM对象和jQuery对象的比较
- 9. JS事件、Bom对象和Dom对象
- 10. JS基础-DOM Event对象
- 更多相关文章...
- • XML DOM - CDATASection 对象 - XML DOM 教程
- • XML DOM - Comment 对象 - XML DOM 教程
- • C# 中 foreach 遍历的用法
- • Scala 中文乱码解决
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS中的DOM对象
- 2. js中的Dom对象
- 3. JS中的BOM、DOM对象
- 4. JS & DOM 对象
- 5. js--dom对象
- 6. 31、js的dom对象
- 7. 细看JS中的BOM、DOM对象
- 8. js中的DOM对象和jQuery对象的比较
- 9. JS事件、Bom对象和Dom对象
- 10. JS基础-DOM Event对象