整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML DOM Body 对象

HTML DOM Body 对象

Body 对象

Body 对象代表了 HTML body 元素。

Body 对象代表文档的主体 (HTML body) 。

body 元素包含了所有的 HTML 文档，如文本，超级链接，图片，表格，列表，等等。

Body 对象属性

W3C: W3C 标准。

属性描述W3C
aLink设置或者返回主体元素的 alink 属性。Yes
background设置或者返回body元素的 background 属性。Yes
bgColor设置或者返回body元素的 bgColor 属性。Yes
link设置或者返回主体元素的 link 属性。Yes
text设置或者返回主体元素的 text 属性。Yes
vLink设置或者返回主体元素的 vLink 属性。Yes

Body 对象事件

事件描述W3C
onload脚本在页面完全载入后会被立即执行。Yes

标准属性和事件

Body 对象同样支持标准的 属性 和 事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

么是内置对象呢？？？内置对象，其实就是JSP中已经给我们提供好的一些Java对象，我们可以直接在JSP页面里面使用这些内置对象，而不需要我们自己去创建。JSP里面提供了9个内置对象，分别是：request、response、session、application、out、config、pageContext、page、exception。这一小节我们就来逐个介绍一下内置对象的用法。

1.1、内置对象的本质

内置对象本质上就是JSP文件编译成Servlet程序之后，在_jspService()方法中创建好的一些java对象，这些对象我们可以直接在JSP页面使用。查看JSP文件编译之后的源代码文件如下所示：

public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
    throws java.io.IOException, javax.servlet.ServletException {

  final java.lang.String _jspx_method=request.getMethod();
  if (!"GET".equals(_jspx_method) && !"POST".equals(_jspx_method) && !"HEAD".equals(_jspx_method) && !javax.servlet.DispatcherType.ERROR.equals(request.getDispatcherType())) {
    response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED, "JSP 只允许 GET、POST 或 HEAD。Jasper 还允许 OPTIONS");
    return;
  }

  final javax.servlet.jsp.PageContext pageContext;
  javax.servlet.http.HttpSession session=null;
  final javax.servlet.ServletContext application;
  final javax.servlet.ServletConfig config;
  javax.servlet.jsp.JspWriter out=null;
  final java.lang.Object page=this;
  javax.servlet.jsp.JspWriter _jspx_out=null;
  javax.servlet.jsp.PageContext _jspx_page_context=null;


  try {
    response.setContentType("text/html;charset=UTF-8");
    pageContext=_jspxFactory.getPageContext(this, request, response,
    			null, true, 8192, true);
    _jspx_page_context=pageContext;
    application=pageContext.getServletContext();
    config=pageContext.getServletConfig();
    session=pageContext.getSession();
    out=pageContext.getOut();
    _jspx_out=out;

    out.write("\r\n");
    out.write("<html>\r\n");
    out.write("<head>\r\n");
    out.write("  <title>JSP内置对象response</title>\r\n");
    out.write("</head>\r\n");
    out.write("<body>\r\n");
    out.write("  <h3>JSP内置对象response</h3>\r\n");
    out.write("  ");

  // 在JSP里面，可以直接使用 response 这个内置对象进行操作
  response.sendRedirect("https://www.baidu.com");

    out.write("\r\n");
    out.write("</body>\r\n");
    out.write("</html>\r\n");
  } catch (java.lang.Throwable t) {
    if (!(t instanceof javax.servlet.jsp.SkipPageException)){
      out=_jspx_out;
      if (out !=null && out.getBufferSize() !=0)
        try {
          if (response.isCommitted()) {
            out.flush();
          } else {
            out.clearBuffer();
          }
        } catch (java.io.IOException e) {}
      if (_jspx_page_context !=null) _jspx_page_context.handlePageException(t);
      else throw new ServletException(t);
    }
  } finally {
    _jspxFactory.releasePageContext(_jspx_page_context);
  }
}

通过上面的源代码可以看到，源代码中有下图几个内置对象。

1.2、内置对象的使用

这里我们就开始介绍一下request、response、session、application、out、config、pageContext、page、exception九个内置对象的具体使用。

（1）request

request对象，是一个HttpServletRequest的请求对象，使用request对象可以获取到当前HTTP请求中的信息。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSP内置对象request</title>
</head>
<body>
    <h3>JSP内置对象request</h3>
    <%
        // 在JSP里面，可以直接使用 request 这个内置对象进行操作
        String username=request.getParameter("username");
        System.out.println(username);
    %>
</body>
</html>

request请求对象中的常用方法，可以看下我之前写的Servlet笔记。

（2）response

response对象，是一个HttpServletResponse响应对象，使用response响应对象可以获取到HTTP响应中的一些信息。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>JSP内置对象response</title>
</head>
<body>
  <h3>JSP内置对象response</h3>
  <%
    // 在JSP里面，可以直接使用 response 这个内置对象进行操作
    response.sendRedirect("https://www.baidu.com");
  %>
</body>
</html>

response响应对象中的常用方法，可以看下我之前写的Servlet笔记。

request和response对象是在_jspService()方法参数中的，如下图所示：

（3）session

session对象，是一个HttpSession会话对象，可以获取到当前Session会话信息。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSP内置对象session</title>
</head>
<body>
<h3>JSP内置对象session</h3>
<%
    // 在JSP里面，可以直接使用 session 这个内置对象进行操作
    session.setAttribute("username", "IDEA");
%>
</body>
</html>

session对象是在JSP文件编译之后创建的，如下图所示：

（4）application

application对象，其实就是我们之前学习的ServletContext上下文对象，只不过在JSP里面，它将这个变量名称定义成了application，用法和ServletContext上下文对象是一致的。

案例代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSP内置对象application</title>
</head>
<body>
<h3>JSP内置对象application</h3>
<%
    // 在JSP里面，可以直接使用 application 这个内置对象进行操作
    application.setAttribute("username", "IDEA");
%>
</body>
</html>

这一小节就先介绍前4个内置对象的使用。

今天就到这里，未完待续~~

家好，我是IT共享者，人称皮皮。

前言

相信做网站对JavaScript再熟悉不过了，它是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript，因为它对做网页方面是有很大作用的。


1.文档对象（DOM）

1).Document对象

这是我们用的最普遍的一个文档对象了，专门用来操作DOM节点时用。

1)).获取元素

document.getElementById()           #通过id查找HTML元素
document.getElementsByName()        #通过name查找HTML元素
document.getElementsByTagName()     #通过标签名查找HTML元素
document.getElementsByClassName()   #通过类名查找HTML元素 
document.querySelector(".h")        #第一个类名为 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class为"no"或者id为"h"的div元素
document.body          #获取body标签
document.documentElement   #获取html标签

2)).获取网页内容

document.cookie        #网页cookie
document.domain        #文档的域名
document.lastModified  #文档被最后修改的日期和时间
document.referrer      #载入当前文档的文档的URL
document.title         #当前文档的标题
document.URL           #当前文档的URL
document.doctype       #当前文档的doctype
document.baseURI       #当前文档的绝对URI
document.documentMode   #浏览器使用的模式
document.documentURI    #文档的URI
document.implementation #DOM实现
document.inputEncoding  #文档的编码（字符集）
document.readyState     #文档的（加载）状态
document.strictErrorChecking    #是否强制执行错误检查

3)).文档写入

document.write('hello world')   向文档写入文本
document.writeln('hello world') 向文档写入文本并换行

4)).获取集合

document.all        #所有html元素
document.anchors    #所有Anchor引用
document.forms      #所有的表单引用
document.images     #所有的图片引用
document.links      #所有的超链接引用
document.scripts    #所有的脚本引用
document.embeds     #所有的流媒体引用

5)).获取节点

childNodes          #获取子节点的集合 ，返回数组 ，并把换行和空格也当成是节点信息。
children            #获取子节点的集合 ，返回数组   
firstChild          #获取第一个子元素  并把换行和空格也当成是节点信息
firstElementChild   #获取第一个子节点
lastChild           #获取最后一个子节点 并把换行和空格也当成是节点信息
lastElementChild    #获取最后一个子节点
parentNode          #获取父节点
parentElement       #获取父节点(IE)
offsetParent        #获取所有父节点  对应的值是body下的所有节点信息
previousSibling         #获取上一个兄弟节点  匹配字符，包括换行和空格，而不是节点
previousElementSibling  #获取上一个兄弟节点  直接匹配节点
nextSibling             #获取下一个兄弟节点  匹配字符，包括换行和空格，而不是节点
nextElementSibling      #获取下一个兄弟节点  直接匹配节点
ownerDocument           #元素的根节点

这里我们获取到了所有的Div元素，我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父，子元素，如下：

6)).创建节点

我们可以自定义节点并添加值，不过要将它添加到文档中去，所以必须添加节点，一般和下方的增加节点配套使用。

document.createElement(标签)  #创建HTML元素
document.createTextNode(文本) #给文档添加文本
document.createComment(文本)  #创建一个注释节点
document.createDocumentFragment() #创建文档粉碎节点

7)).增加节点

appendChild（节点） #节点被添加到元素的末尾
insertBefore（a,b） #a节点会插入b节点的前面

8)).删除节点

removeChild(节点名)  #被移除的节点仍在文档中，只是文档中已没有其位置了

9)).替换节点

replaceChild(插入的节点，被替换的节点)

10)).复制节点

a.cloneChild() #复制a节点,复制出来的节点作为返回值为true时，则a元素后代也一并复制。否则，仅复制a元素本身

11)).节点属性

#节点类型 nodeType 有三种情况
#1.元素节点  2.属性节点  3.文本节点


#节点名称 nodeName 


#节点值 nodeValue 
#元素节点没节点值，为null 
#文本节点的节点值就是文本
#属性节点的节点值就是该属性值


#节点属性获取
a.width
a['width']
a.gerAttribute(属性名)  返回指定的属性值
a.gerAttributeNode(属性名) 返回指定的属性节点
节点属性设置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的属性
a.setAttributeNode(b) 添加指定的属性节点


#节点属性删除
a.removeChild(子节点)    从元素中移除子节点
a.removeAttribute(属性)  从元素中移除指定属性
a.removeAttributeNode(属性) 移除指定的属性节点，并返回被移除的节点


a.id 获取当前元素的id
a.className  获取当前元素的class
a.classList  获取当前元素的class列表


a.accessKey='w'    设置或返回元素的快捷键
a.namespaceURI     返回指定节点的命名空间的 URI
a.dir              设置或返回元素的内容是否可编辑
a.normalize()      合并元素中相邻的文本节点，并移除空的文本节点
a.tabIndex='3'     设置或返回元素的tab键控制次序
a.tagName          返回元素的标签名
a.textContent      设置或返回节点及其子代的文本内容
a.title            设置或返回元素的标题属性
a.item(num)        返回节点列表中位于指定下标的节点
a.length           返回节点列表中的节点数

12)).获取元素文本

a.innerHTML  获取或者设置对象内的HTML
a.innerText  获取或者设置对象内的文本
a.outerHTML  获取或者设置对象外的HTML
a.outerText  获取或者设置对象外的文本
a.value      获取或者设置表单元素的值


总结

这篇文章主要介绍了JavaScript的文档对象。下一篇文章，我们继续介绍JavaScript，敬请期待！


在线咨询
上一篇：css实现一箭穿心
下一篇：用 Atom，在 Windows 上定制属于自己的

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 噶尔县 禄丰县 下城区 宁津县 乌苏市 仲巴县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服