2021-03-03

1.查询DOM元素

1.document.querySelector("选择器")

  查找到的是第一个元素

2.document.querySelectorAll("选择器")

  伪数组

3.id选择器 document.getElementById("不需要加#");

4.通过类选择器查找document.getElementByClassName("div");

  伪数组

5.通过元素名查找document.getElementByTagName("div");

  伪数组

2.创建DOM元素

document.createElement("标签的名字")

步骤

  1.创建dom元素

  var 变量名= document.createElement("标签的名字");

  2.放内容

  dom.innerText = "wenben"

    放文本

  dom.innerHTML = "<div>< img src="" ></div>"

    放HTML里的字符串

  dom.src="";

  dom.appendChild(子元素);

    dom 不一定是父元素

  3.放到父元素中

  父元素.appendChild(dom);

<ul class="nav"></ul>



<script>

//在nav里面  创建一个li  里面放入  首页  文字

    var nav = document.querySelector(".nav");


    var li = document.createElement("li");

    li.innerText = "首页";

    nav.appendChild(li);

</script>


  <ul class="goods"></ul>


//商品goods

    var goods =document.querySelector(".goods");

    var goodsItem = document.createElement("li");

    goods.appendChild(goodsItem);

JS操作HTML

1.创建 HTML

document.createElement("标签名");

var p = document.createElement("p");

属性

在js也同样可以获取或设置属性

div.style.opacity = 0.6;

var image = document.createElement("img");

image.src = "https://www.baidu.com/img/dong_f17b19f600dbf0bfc9b8bed5836f50be.gif";

< img  src="1.jpg">

注意:

创建完得标签 需要放到指定 才能显示

步骤

1.创建HTML标签

var image = document.createElement("img");

2.放到某个容器

document.body.appendChild(image);

拼接dom对象

1.获取HTML

功能

用js修改样式

修改里面的内容

添加事件

查询标签

var d = document.querySelector("选择器")

2.删除HTML

清空标签/插入标签

xx.innerHTML = "";

3.替换HTML

创建日期对象

获取当前日期

var date = new Date();

new 通过类名 创建对象的关键字

Date 日期类

通过日期类  -> 创建一个当前的日期对象

日期

得加1

大写的M

小写的M

毫秒

获取将来 过去的时间(指定时间)

new Date(1288336112000)

var date = new Date();

date.setTime(1288336112000);

时间戳

1970年-某个时间的  毫秒数

时间戳 转 日期对象

new Date(1288336112000)

var date = new Date();

date.setTime(1288336112000);

日期对象 转 时间戳

var date = new Date();

date.getTime();

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • .查询DOM元素: (1)document.querySelector(“选择器的名字”) 特点:查找的是第一个元...
    隱身垨候_d747阅读 171评论 0 0
  • 日期对象用于处理日期和时间。 如何使用 Date() 方法获得当日的日期。 getFullYear() 使用 ge...
    a79023ec6375阅读 161评论 0 0
  • 日期对象用于处理日期和时间。 如何使用 Date() 方法获得当日的日期。 getFullYear() 使用 ge...
    木南以北阅读 134评论 0 0
  • 简述JavaScript起源起源于美国的Netscape公司,原名为LiveScript,后改为JavaScrip...
    3ab670b99521阅读 3,110评论 0 0
  • 夜莺2517阅读 127,779评论 1 9