如何用JS操作HTML（基础）

AVIC_501

已于 2023-05-17 18:02:24 修改

阅读量2k

点赞数 1

分类专栏： JavaScript 文章标签： html

于 2023-05-17 18:01:40 首次发布

本文链接：https://blog.csdn.net/Li5306/article/details/130731785

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.0.1 JS对象和标签的关系

<body>
  
  <div id='div'>888888</div>

  <script>

    // 获取到了一个标签.这个表示是一个对象.
    // 参数是标签的id值.(不是id选择器)
    const oDiv = document.getElementById('div');
    console.dir(oDiv);
    // oDiv.id = 'wrap';
    // 无法删除oDiv的id属性。
    // delete oDiv.id;
    // 添加自定义属性是无法反映到标签上的。
    // oDiv.abc = 'custom attr';

    // oDiv对象就是div标签本身！ => 错
    // oDiv是一个js对象 div标签是html元素,本身就不是一类东西.
    // js只是通过oDiv对象来间接的操作html元素.有些可以操作,有些操作不了.

    // 通过一个方法添加自定义属性.
    oDiv.setAttribute('abc', 'custom attr');



  </script>

</body>

1.0.2 const声明对象

修改oDiv的id属性,为什么没报错?
我们修改的是oDiv的属性,不是修改oDiv
oDiv.id = 'wrap';
oDiv是cosnt声明的.不能修改oDiv的值.
oDiv = 1000;
声明一个对象时,习惯是用const声明的.

<body>
  
  <div id='div'>888888</div>

  <script>

    const oDiv = document.getElementById('div');
  
  </script>

</body>

1.0.3 标签的知识

标签的内容：

只有双标签有内容，开标签和闭标签之间的就是标签内容

属性：

  1：全局属性所有标签都可以使用的属性。常见是id，class，style，title

  2：可选属性不同标签的可选属性不一样。例如img标签可以有width属性，div没有。

  3：自定义属性，开发人员为了某种目的，自己添加的属性

  4：事件属性。数据属性都以on开头。on+事件名，事件属性的属性值是js代码

没有=的属性是布尔属性.这种属性的属性值用js表示就是布尔值.

style是属性,style的属性值是样式

<style>
    div{
      background-color: red;
    }
  </style>
</head>
<body>
  
  <div title='这是div' yyy='bbb'>1111</div>

  <input type="button" value='按钮' onclick='alert("别点了，我痒")' />

  <img width="500" src="img/222.jpg" title='这是小陈' alt="">

  <p id='p1' class='content' style='width:300px' aaa='bbb' ccc>33333</p>

  <input type="checkbox" checked />

  <input type="button" value='按钮'/>
  <button>按钮</button>

  <script>

    const oP = document.getElementById('p1');
    // 获取所有的oP的属性，包括自定义属性
    console.log(oP.attributes);

  </script>

</body>

1.0.4 JS修改样式

修改style属性的backgroundColor属性,就可以让页面上的div的背景色改变.

如何通过样式名书写属性名?

1:没-的样式名就是属性名.

2:有-的样式名写成驼峰

以下对style对象的修改，实际上修改的是标签的行间样式。

  oDiv.style.backgroundColor = 'red';

    oDiv.style.fontSize = '70px';

    oDiv.style.width = '500px';

<body>
  
  <div id='wrap'>标签</div>

  <script>

    const oDiv = document.getElementById('wrap');

    // cssText可以同时修改多个样式。写法根行间样式的写法一模一样
    oDiv.style.cssText = 'background-color: red; font-size: 70px; width: 500px;'

    console.dir(oDiv.style);
  </script>

</body>

1.0.5 JS获取样式

<style>
    p{
      background-color: brown;
    }
    div{
      background-color: blueviolet !important;
    }
  </style>
</head>
<body>
  <div id='wrap' style='background-color:pink'>111111111111111111111111111</div>
  <p id='p1'>2222222222</p>

  <script>

    const oDiv = document.getElementById('wrap');
    const oP = document.getElementById('p1');

    // 行间样式自动存储在style对象上.
    console.log(oDiv.style);
    console.log(oDiv.style.backgroundColor);

    // 这个写法无法获取不是行间样式的其他样式值
    console.log(oP.style.backgroundColor);

    // 获取最终的样式的方法.
    // getComputedStyle是哪个对象的方法? => window的方法
    // 它的参数是什么? => 参数是希望获取的样式所在的元素
    // sty变量是什么? => sty是一个对象.sty对象的所有属性都是最终样式的样式名.

    const sty = getComputedStyle(oDiv);
    console.log(sty);
    console.log(sty.backgroundColor);

    // color 不是一个对象,就是一个字符串.
    const color = getComputedStyle(oDiv).backgroundColor;

    console.log(color);

  </script>

1.0.6 JS修改内容

修改标签的内容,只需要修改标签对象的innerHTML或者innerText属性就可以了.
    innerText和innerHTML的区别：
    1:innerText只能获取文本内容,不包含标签.innerHTML可以获取包含标签的内容
    2:innerText不能把标签插入已知标签中,innerHTML可以.
    getComputedStyle
    oBtn.innerText = '一个大大的按钮';
    oBtn.innerHTML = '一个大大的按钮';

<body>
  
  <button id='btn'>按钮</button>
  <div id='wrap'>
    <p>p的内容</p>
  </div>
  <div id='div1'></div>

  <script>

    const oBtn = document.getElementById('btn');
    const oWrap = document.getElementById('wrap');
    const oDiv = document.getElementById('div1');

    // console.dir(oBtn);
    // console.dir(oWrap);


    // oDiv.innerText = '<span>sssss</span>';
    oDiv.innerHTML = '<span>sssss</span>';
    

  </script>

</body>

<body>
  
  <div id='div1'></div>

  <script>

    const oDiv = document.getElementById('div1');

    oDiv.innerHTML = '<p>uuuuuu</p>';
    // oDiv老的内容+新的内容 变成 当前的内容
    oDiv.innerHTML = oDiv.innerHTML + '<p>ttttttttt</p>';
    oDiv.innerHTML += '<p>ttttttttt</p>';
    oDiv.innerHTML += '<p>rrrrrrrrr</p>';

    let x = 10;
    x = 20;
    x = x + 30;
    console.log(x);

    // -----------------------------------------------------------------
    oDiv.innerHTML = '<p>uuuuuu</p><p>ttttttttt</p>';
    oDiv.innerHTML = '<p>uuuuuu</p>'+'<p>ttttttttt</p>';

    // 反引号支持换行
    oDiv.innerHTML = `
      <p>uuuuuu</p>
      <p>ttttttttt</p>
    `;

  </script>

</body>

1.0.7 JS修改属性

<body>
  
  <div id="div" class='active' aaa='bbb'>111</div>
  <input id='btn' type="button" value='大按钮'>
  <input id='text' type="text">
  <textarea id="area" cols="30" rows="10"></textarea>
  <select name="" id="select">
    <option value="1111">1111</option>
    <option value="2222">2222</option>
    <option value="3333">3333</option>
  </select>
  <input type="color" id='color'>

  <script>

    const oDiv = document.getElementById('div');
    const oBtn = document.getElementById('btn');
    const oText = document.getElementById('text');
    const oArea = document.getElementById('area');
    const oSelect = document.getElementById('select');
    const oColor = document.getElementById('color');

    // 改全局属性或者可选属性，直接通过.来修改。class属性的对象属性是className
    // 不能用这样的方式修改自定义属性。
    oDiv.id = 'wrap';
    oDiv.className = 'cn';
    // oDiv.aaa = 'ccc';

    // 通过setAttribute方法来修改自定义属性aaa为ccc
    oDiv.setAttribute('aaa', 'ccc');

    // 无法获取自定义属性
    // let msg = oDiv.aaa;
    // undefined
    // console.log(msg);

    // 获取自定义属性aaa的值.
    // let msg = oDiv.getAttribute('aaa');
    // console.log(msg);

    console.dir(oDiv);
    // 获取按钮的value属性。
    console.log(oBtn.value);
    // 获取文本框的输入内容
    console.log(oText.value);
    // 获取文本域输入的内容
    console.log(oArea.value);
    // 获取下拉框选择的内容
    console.log(oSelect.value);
    // 获取颜色框选中的颜色
    console.log(oColor.value);

  </script>

</body>

1.0.8 标签的所有属性都是字符串

<body>
  
  <input type="text" id='text' value='100' >

  <script>

    // 获取到的标签的样式,属性值,内容,全部都是字符串.

    const oText = document.getElementById('text');
    
    // 文本框获取的value是字符串,*1之后会变成数字100
    let num = oText.value * 1 + 50;

    console.log(num);

  </script>

</body>

1.0.9 JS添加事件

通过js来添加事件。事件代码需要写在一个函数中。
函数固定写法: function 函数名() { 函数内的代码 }
函数内的代码需要函数触发才能执行.函数不触发就不执行.

<body>
  <!-- 点击按钮后,弹窗 -->
  <button onclick='alert(1000)'>按钮</button>
  <button id='btn'>有js的按钮</button>
  <script>

    const oBtn = document.getElementById('btn');

    // js添加事件不能这样写
     oBtn.onclick = alert(1000);


    // 当按钮被点击时,就触发后面的函数.
    oBtn.onclick = function() {
      alert(1000);
    }

  </script>

</body>

1.1.0 JS插入列表

<body>
  
  <input type="text" id='text'>
  <input type="button" id='btn' value='按钮'>
  <ul id='ul'></ul>

  <script>

    const oText = document.getElementById('text');
    const oBtn = document.getElementById('btn');
    const oUl = document.getElementById('ul');

    // 每次点击按钮，都往ul内插入一个li，li的内容就是文本框输入的内容

    oBtn.onclick = function() {
      oUl.innerHTML = oUl.innerHTML + '<li>' + oText.value + '</li>';
      // oUl.innerHTML += '<li>111</li>';
    }

  </script>

</body>

1.1.1 JS事件类型

<body>
  <div id='wrap'></div>
  <script>

    const oDiv = document.getElementById('wrap');
    // 所有是事件都必须赋值一个函数才有效果

    // 学习事件
    // 1:事件什么时候触发.
    // 2:事件名怎么写.

    // 当鼠标移入时，div变黑
    oDiv.onmouseover = function() {
      oDiv.style.backgroundColor = 'black';
    }

    // 当鼠标移出时，div变红
    oDiv.onmouseout = function() {
      oDiv.style.backgroundColor = 'red'
    }

  </script>

</body>

1.1.2 JS操作符

操作符 , 操作符也叫运算符.

    经过操作符计算之后,总能得到一个结果.

    +,-,*,/

    =, typeof, delete;

    操作符计算的数据,我们叫操作数

    1 + 2 => + 就是操作符, 1和2是+的操作数

    x = 10; => 就是操作符, x和10就是操作数

    typeof 100 => typeof是操作符, 100是操作数.

    delete oYm.name => delete是操作符, oYm.name是操作数.

    双目运算符 => 操作数是2个的运算符.(大多数运算符都是双目)

    单目运算符 => 操作数是1个的运算符.

    js的操作符分类:

    1:算术运算符.+,-,*,/

    2:比较运算符.<,>,===,!=

    3:逻辑运算符.||,&&,!

    4:条件运算符.(三目运算符).?:

    5:赋值运算符.

    6:其他,typeof,delete,void,in,instanceof

1.1.3 JS表达式

表达式:

          1:原始表达式 => 单个常量或者变量 => 常量返回自身,变量返回变量的值

          2:操作符表达式 => 不同操作符返回的值不一样的.

          3:函数调用.每次方法的使用,都是在写函数调用表达式. => 先不考虑

          表达式经过计算都有一个返回值.(计算结果)

// 程序的输入 => 以表达式输入.

    // 程序的输出 => 表达式的返回值.

<script>
    // 把y变成typeof 100 + typeof 200的返回值
    // y变成 'number' + 'number'
    let y = typeof 100 + typeof 200;
    // const oDiv = document.getElementById('div');
    let num = alert(100) + alert(200);
</script>

<script>
     // 把x变成10.
    // 把x变成10的返回值.
    let x = 10;
    // 把y变成1+1的返回值.
    let y = 1+1;
    // 把str变成typeof 100的返回值.
    let str = typeof 100; // 'number'
    // 把msg变成console.log(100)的返回值.
    let msg = console.log(100); // undefined
    // 把m变成typeof 100 + console.log(100)的返回值.
    // 把m变成'number' + undefined 的返回值
    let m = typeof 100 + console.log(100); // 'numberundefined'
    // 把h变成typeof typeof 100的返回值.
    // 把h变成typeof 'number'的返回值.
    // 把h变成'string'的返回值.
    let h = typeof typeof 100;
</script>

<script>
     // 打印100的返回值。
    console.log(100);
    // 打印1+1的返回值
    console.log(1+1);
    // 打印typeof 100的返回值
    console.log(typeof 100);
    // 打印console.log(100)的返回值.
    console.log(console.log('log里面的log'));
</script>

AVIC_501

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
如何用JS操作HTML（基础）

delete oYm.name => delete是操作符, oYm.name是操作数.修改style属性的backgroundColor属性,就可以让页面上的div的背景色改变.3:函数调用.每次方法的使用,都是在写函数调用表达式. => 先不考虑。数据属性都以on开头。双目运算符 => 操作数是2个的运算符.(大多数运算符都是双目)2:操作符表达式 => 不同操作符返回的值不一样的.没有=的属性是布尔属性.这种属性的属性值用js表示就是布尔值.以下对style对象的修改，实际上修改的是标签的行间样式。
复制链接

扫一扫