前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >DOM知识总结

DOM知识总结

作者头像
阮键
发布2019-08-01 20:20:56
5800
发布2019-08-01 20:20:56
举报
文章被收录于专栏:JAVA人生/面试技巧

1.什么是DOM:

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

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

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

代码语言:javascript
复制
获得div信息:
代码语言:javascript
复制
document.getElementById("div对应的id");
代码语言:javascript
复制
<!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" :

代码语言:javascript
复制
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")

调整界面:

代码语言:javascript
复制
<!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)上两页

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档