DOM知识总结

1.什么是DOM:

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程

序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)

组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。

获得div信息:
document.getElementById("div对应的id");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom简介</title>
</head>
<body>
    <!-- 
        <div id="intro"></div>
        <div id="main">
            <p>The DOM is very useful.</p>
        </div>
        <div class="content"></div>

        var x=document.getElementById("intro");
        var x=document.getElementById("main");
        var y=x.getElementsByTagName("p");
        var content = document.getElementsByClassName("content");
     -->
    <div id="intro">helloworld</div>


    <div id="main">
        <p>The DOM is very useful.</p>
    </div>

    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>

    <script type="text/javascript">
        // 通过js获取html标签
        var intro = document.getElementById("intro");  // 通过id找html,唯一的


        var main = document.getElementById("main");
        var p = main.getElementsByTagName("p")[0];

        var content1 = document.getElementsByClassName("content")[0];
    </script>
</body>
</html>

DOM的节点:

var p=document.createElement("p");//生成一个<p></p>

var word=document.createTextNode("我是新增的p标签“);//在<p></p>里面添加p的内容

p.appendChild(word);//在界面的p标签最后加上新的p标签

DOM的事件:也就是点击某一个内容触发事件

为 <button> 元素添加点击事件。 当用户点击按钮时,在 id="demo" 的 <p> 元素上输出 "Hello World" :

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

<div onclick="alert("helloword")>按钮</div>

<div id="main">我是main</div>

<div id="btn">我是btn</div>

<script type="text/javascript">

var main=document.getElementById("main");

  main.onclick=function(){

    alert("main被触发了”);

}

var btn=document.getElementById("btn");

btn.addEventListener("click")

调整界面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js window</title>
</head>
<body>
    <button onclick="openwindow()">创建窗口</button>
    <button onclick="myFunction()">调整窗口</button>
    <button onclick="moveFunction()">移动窗口</button>
    <button onclick="closeFunction()">关闭窗口</button>
    
    <script type="text/javascript">
        var w;
        
        function openwindow(){
     <!-- https://www.runoob.com/jsref/met-win-open.html
              打开一个空的新界面 -->
            w=window.open('','', 'width=300,height=300');
        }

        function myFunction(){
      <!--重新设置大小-->
            w.resizeTo(500,500);
            w.focus();
        }
        

        function moveFunction(){
       <!--移动到了新的位置定位--> 
            w.moveTo(700,500);
            w.focus();
        }
        

        function closeFunction(){
      <!--关闭文档框-->
            w.close(700,500);
            w.focus();
        }
    </script>
</body>
</html>

window.Location:

步骤:

浏览器界面——按下F12——点击Console——分别输入如下内容

location.hostname 返回web主机的域名

location.pathname返回当前页面的路径和文件名

location.protocol 返回所使用的web协议(http://或者https://)

kk返回(当前页面的整个URL)

window.history:

Window.history 对象在编写时可不使用window这个前缀直接写history

history.back()在与浏览器点击后会后退一级

history.forward()在与浏览器中点击按钮向前一级

history.go(0)刷新当前页,history.go(-1)上一页,history.go(-2)上两页

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券