原生js操作DOM元素的一些使用

2021-02-24 本文已影响0人唯吾听烟雨

1、原生js给DOM元素添加一个类名

方法一：

使用DOM.setAttribute("class","类名")

方法二：

DOM.classList.add("类名")

方法一给DOM元素添加类名会覆盖原有的类名

方法二可以给DOM元素添加一个类名后还可以在继续给DOM元素添加新的类名并且不会覆盖已有的类名

2、原生js中如何添加dom元素

(1) appendChild()

概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。
使用方式：fatherdom.appendChild( insertdom )。
兼容性：所有浏览器都支持此方法。

(2) insertBefore()

概念：把要插入的节点添加到指定父级里面的指定节点之前。
使用方式：fatherdom.insertBefore( insertdom，chosendom )。
兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在

(3) 举例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>practise</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <style>
    #container {
      width: 200px;
      height: 200px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
<div id="container">
   <div class="aa">aa</div>
  <div class="bb">bb</div>
</div>
<script>
  var Java = function (content) {
    this.content = content;
    (function (content) {
      var div = document.createElement('div');
      div.innerHTML = content;
      div.style.color = 'green';
      document.getElementById('container').appendChild(div)
    })(content)
  };

  var Html = function (content) {
    this.content = content;
    (function (content) {
      var div = document.createElement('div');
      div.innerHTML = content;
      div.style.color = 'red';
      var bb = document.getElementsByClassName("bb")[0];
      document.getElementById('container').insertBefore(div, bb)
    })(content)
  };

  Java("这里是Java模块");
  Html("这里是HTML模块");
</script>
</body>
</html>

效果

image.png

js判断元素是否包含某个class名

element.className.indexOf('rgb196') !== -1
//为-1则不包含该class
<div class="title-article-copy"></div>
//如果判断是否包含 "title-article" 这个类名呢
$ele.className.split(/\s+/).indexOf(targetClass) === -1
//这样的方法可能更好一点

js给a 按钮增加disable属性

//启用
dom.setAttribute("disabled","disabled")  
//禁用
dom.removeAttribute(“disabled”)

jquery设置

$("#id").attr("disabled","disabled")
$("#id").removeAttr("disabled")

注意：很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。