1. DOM操作HTML

1）注意：绝对不要在文档加载完成之后使用docment.write()。这样会覆盖原来的文档

<body>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>

   <button onclick="aaa()">按钮</button>

</body>
<script>
  function aaa(){
     document.write("world");
      }
</script>

运行结果：

2）寻找元素：

通过id寻找html元素

<body>
  <p id="pid">hello</p>
  <button onclick="demo()">按钮</button>

</body>
<script>
  function demo(){
    var nv=document.getElementById("pid").innerHTML="ws";  //获得ｉｄ

   　nv.innerHTML="world";                //通过innerHTML改变html内容
      }
</script>

通过标签名寻找html元素

document.getElementsByTagName("p") 

修改属性

1）修改链接地址：修改属性href
<body>
 <a id="aid" href="http://www.baidu.com">hello</a>

  <button onclick="demo()">按钮</button>

</body>
<script>
  function demo(){
   document.getElementById("aid").href="http://mail.163.com";

      }
</script>

2）修改图片，属性src
<body>
  <img id="iid" src="0.png">
  <button onclick="demo()">按钮</button>
</body>
<script>
  function demo(){
    document.getElementById("iid").src="1.png";
      }
</script>
我容易犯的错误，赋值后面忘记加双引号， 未通过id关联，未通过函数关联

问题：不会用

  通过标签名寻找html元素

document.getElementsByTagName("p")

第三天：JavaScript的DOM对象和DOM操作HTML的更多相关文章

  1. 第一百一十四节，JavaScript文档对象，DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  2. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  3. 第三章JavaScript 内置对象

    1 Number 1.1 属性 MAX_VALUE JS可以表示的最大的数字 MIN_VALUE JS可以表示的最小的数字 1.2 方法 toFixed(length) 指定保留长度的小数 toExp ...

  4. JS-jquery对象和dom对象的属性操作区别

    <label class="">时间1</label> <label class="">时间2</label> ...

  5. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  6. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  7. 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

  8. jquery对象和javascript的dom对象转换

    Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为 ...

  9. [jQuery]jQuery和DOM对象(三)

    iQuery和DOM对象 用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv ...

随机推荐

  1. BZOJ1047或洛谷2216 [HAOI2007]理想的正方形

    BZOJ原题链接 洛谷原题链接 显然可以用数据结构或\(ST\)表或单调队列来维护最值. 这里采用单调队列来维护. 先用单调队列维护每一行的最大值和最小值,区间长为正方形长度. 再用单调队列维护之前维 ...

  2. unbutton 内部title label多行显示

    dateBtn1.titleLabel.lineBreakMode = NSLineBreakByWordWrapping; [dateBtn1 setTitle: @第一行\n第二行" f ...

  3. Spring 属性注入（三）AbstractNestablePropertyAccessor

    Spring 属性注入(三)AbstractNestablePropertyAccessor Spring 系列目录(https://www.cnblogs.com/binarylei/p/10117 ...

  4. flask 中文编码解码

    process.append("中文") print(process) # return Response(json.dumps(process), mimetype='appli ...

  5. Windows服务器支持json文件

    Windows服务器默认是不支持json文件的直接读取的.如在浏览器中输入地址访问或是通过代码访问,都是无法获取到数据的.需要在服务器端进行配置,让服务器支持解析.json扩展名的json文件. 方法 ...

  6. is not allowed to connect to this MySQL server解决办法

    GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY 'mypassword' WITH GRANT OPTION; myuser:代表你 ...

  7. TabControl中显示和隐藏TabPage页

    在使用TabControl控件时,希望隐藏其中某个选项卡(即TabPage).TabPage类明明提供了一个Hide方法,用在代码中却没有任何效果,甚是奇怪.无奈之余,只好考虑另辟途径 方法一: 设置 ...

  8. yum安装nginx 加载image_filter 加载方式

    通过yum安装的nginx 加载image_filter方式方法: yum install -y gd-devel libgd gcc libgdyum install -y nginx-module ...

  9. hdu-1800（字符串hash）

    题目链接:传送门 思路: 就是找最多多少个扫帚,每个扫帚上有连续递增的序列,就是找一个最多重复数字的重复次数. 由于是30位,每次用char*类型,然后用hash映射一下,排序找最多就行了. 注意: ...

  10. Le Chapitre IV

    J'avais ainsi appris une seconde chose très importante: C'est que sa planète d'origine était à peine ...