DOM编程和AJAX

Nawkham

于 2020-11-20 18:56:44 发布

阅读量415

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Nawkham/article/details/109861145

版权

javascript 专栏收录该内容

5 篇文章

订阅专栏

DOM编程

通过DOM(document object module、概念上的东西，W3C标准)去操作，修改网页文档。

DOM的官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容（具体的数据）、结构（HTML标签，元素）、样式（CSS）、事件。

DOM只是一个标准，就是操作网页的标准。而这个标准(模型)在浏览器中，以“对象”的方式实现。

核心DOM：提供了操作HTML文档(显示)或**XML文档(存储数据)**的公共的属性和方法。
HTMLDOM：针对HTML文档，提供的专有的属性和方法。
XMLDOM：针对XML文档，提供的专有的属性和方法。
EventDOM：事件DOM，提供了很多的常用事件。
CSSDOM：提供了操作CSS的一个接口。

结点是指HTML标签（元素）。

获取标签的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getElement(val) {
            // let p = document.getElementsByTagName('p');
            // alert(typeof p);
            // document.write(p[0].innerHTML="我被修改了！！");
            // val.innerHTML="我被修改了！！";
            // val.style.color="red";
            // val.style.fontSize="100px";
            // val.style.fontFamily="华文彩云";
            let p = document.getElementsByClassName("cls");
            document.write(p[0].innerHTML="getElementsByClassName");
        }
    </script>
</head>
<body>
    <p id="p1" onclick="getElement(this)" name="p1" class="cls">段落1</p>
    <p id="p2"οnclick="getElement(this)" name="p2" class="cls">段落2</p>
    <button value="" onclick="getElement(this)">点爷</button>
</body>
</html>

<!DOCTYPE html>
<html>
<body>


<script>
function ChangeBackground1()
{
var div1=document.getElementById("div");
div1.style.backgroundColor="blue";
}
function ChangeBackground2()
{
var div1=document.getElementById("div");
div1.style.backgroundColor="red";
}
</script>

<div id="div" style="height:100px;width:100px;background-color:red" onmousemove="ChangeBackground1()" onmouseout="ChangeBackground2()"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");/*创建P标签*/
var node=document.createTextNode("This is new.");/*创建文本内容*/
para.appendChild(node);/*将创建文本内容追加到P标签*/
/*<p>This is new.</p>*/
var element=document.getElementById("div1");/*找到Div*/
element.appendChild(para);/*将创建的p标签以及内容追加给div*/
//当前节点.appendChild("孩子元素")方法是用来追加孩子
</script>
</body>
</html>

    <p id="p">我是谁，没有绝对安全的系统</p> <!--文本节点的父节点是p标签-->
    <script>
        // let p = document.getElementById('p').childNodes[0];
        let p = document.getElementById('p');   /*获取p标签*/
        let text = p.childNodes[0]; /*获取当前结点的子节点，childNodes获得元素节点子节点数组*/
        /*子节点是文本节点，文本节点只有一个，所以childNodes数组只有一个元素，从下标0开始取值*/
        let content = text.nodeValue;   /*获取文本节点值*/
        document.write(content);
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
        function changeUrl() {
            //获取div
            let div = document.getElementsByTagName('div'); //div是数组，数组中有两个元素，div[0],div[1]
            //div[1].nextSibling获取的是a所在的结点，不是a标签本身。
            //div[1].nextSibling.nextSibling获取a标签
            div[1].nextSibling.nextSibling.href="https://cn.bing.com/";
            div[1].nextSibling.nextSibling.innerHTML="Google!";
        }
    </script>

    <div id="div"></div><!--div和a是兄弟标签-->
    <div></div>

    <a href="https://www.baidu.com">百度一下</a>
    <br>
    <button onclick="changeUrl()">switch search enginne</button>
</body>
</html>

AJAX

AJAX: Asynchronous JavaScript and XML

异步的JS和XML(传输数据)

在前端浏览器中，通过JS发送异步的XML请求，把请求的数据返回给前端。

XMLHttpRequest是AJAX的基础。

通过XMLHttpRequest来发送，首先需要创建对象：

variable = new XMLHttpRequest(); //现代浏览器
variable = new ActiveXObject("Microsoft.XMLHTTP");

<html>
<head>
  <meta charset="utf-8">
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
/*根据浏览器来new XML请求方式*/


xmlhttp.onreadystatechange=function()/*onreadystatechange
当请求发出之后要做的操作，后面可跟函数
*/
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    /*
    readyState表示XMLHttpRequest的状态
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
    
    status表示响应的状态码
    1XX 还在继续处理中
    2XX 请求成功
    3XX 跳转
    4XX 请求有问题
    5XX 服务器内部出错
     */
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;/*
    responseText表示请求回来的数据 */
    }
  }
xmlhttp.open("GET","http://192.168.40.1:81/ajax/test.txt",true);
xmlhttp.send();
}

</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>