Java教程

DOM文本对象模型

本文主要是介绍DOM文本对象模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

DOM文档对象模型

DOM节点的分类
<div class="" id="">我是div</div>
	// 1.Dom节点分类
    // 文本节点 ==> 我是div 所有标签显示的内容
    // 属性节点 ==> class id  所有标签里面的属性
    // 元素节点 ==> div  所有的标签
节点的获取
 	document.getElementById //通过id获取
    document.getElementsByClassName //通过类名获取
    document.getElementsByName // 通过name获取
    document.getElementsByTagName // 通过标签名获取

    document.querySelector // 获取第一个
    document.querySelectorAll //获取所有
	document.body //获取body
节点的属性
<script>
    // 元素具备的属性
    // id  className style
    // id 获取对应的id (设置)
    // className 获取对应的class名
    // style 获取样式(设置)
    // title 获取title属性
    // innerHtml 获取显示的内容(设置,包含html内容)
    // innerText 获取显示的文本(设置,不包含html内容)
</script>

<body>
    <div class="box" id="innerbox" name="hz"></div>
    <script>
      let div = document.querySelector("div")
      // 获取所有的元素节点 返回的是一个伪数组
      console.log(div.attributes)
      console.log(div.attributes.length)
      // 通过下标获取对应的属性节点
      let id = div.attributes[1]
      // 通过key键值获取对应的属性节点
      console.log(div.attributes["id"])
      console.log(id)
      // 节点的几个属性 nodeName nodeType nodeValue
      console.log(id.nodeName)
      console.log(id.nodeType)
      console.log(id.nodeValue)
    </script>
  </body>
元素节点的方法
 <div title="text"></div>
    <input type="text" placeholder="password">
    <a href="http://4399.com"></a>
    <script>
        let div = document.querySelector("div")
        // 获取
        console.log(div.getAttribute("title"))
        // 移除
        div.removeAttribute("title")
        // 增加,修改
        div.setAttribute("class","box")
        div.setAttribute("id","hz")
        // .语法获取自带的属性 
        console.log(document.querySelector("input").value)
        console.log(document.querySelector("input").type)
        console.log(document.querySelector("input").placeholder)
        console.log(document.querySelector("a").href)
    </script>
节点操作的方法
 // 创建元素节点 createElement("标签名")
    let new_div = document.createElement("div")
    // 创建属性节点 createAttribute("class")
    let cla = document.createAttribute("属性名")
    // 设置属性节点
    cla.value = "box"
    // 创建文本节点 createTextNode("文本内容")
    let text = document.createTextNode("这是一段文本")
    // 给new_div设置属性 setAttributeNode
    new_div.setAttributeNode(cla)
    // 给new_div添加子节点
    new_div.appendChild(text)
    // 把new_div添加到body里面
    // document.body.appendChild(new_div)

    let newEle = document.createElement("div")
    document.body.appendChild(newEle)

    let span = document.createElement("span")
    let p = document.createElement("p")
    // insertBefore(新元素,旧元素)在某某之前添加
    new_div.insertBefore(p,text)
    // appendChild() 在后面追加
    new_div.appendChild(span)
    document.body.appendChild(new_div)
    // 全部移除 remove()
    newEle.remove()
    // 移除对应的子节点 removeChild)
    new_div.removeChild(p)
    // 替换对应的子节点 replaceChild(元素,要替换的元素)
    new_div.replaceChild(p,span)
    // 全部替换 replaceChildren()
    new_div.replaceChildren("a")
this指向
 <body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
  </body>
  <script>
  // this 指向调用者本身
  var btn = document.querySelectorAll("button");
  console.log(btn);
  for (var i = 0; i < btn.length; i++) {
    console.log(i);
    btn[i].onclick = function () {
      console.log(this);
    };
  }
  setTimeout(() => {
    console.log(this); // 指向window
  }, 1000);
</script>
克隆
 <button>浅克隆</button>
    <button>深克隆</button>
    <div class="box">
        <div class="inner"></div>
    </div>

    <script>
        var oBtns = document.querySelectorAll("button");

        var oBox = document.querySelector(".box");
        //浅克隆: 只会克隆自身结构,不会克隆子节点
        oBtns[0].onclick = function () {
            var cloenDiv = oBox.cloneNode(false);//  false浅克隆
            //把克隆的div,添加到body里
            document.body.appendChild(cloenDiv)

        }
        //深克隆
        oBtns[1].onclick = function () {
            var cloenDiv = oBox.cloneNode(true);//  
            //把克隆的div,添加到body里
            document.body.appendChild(cloenDiv)
        }
    </script>
子元素节点
<ul id="box">
        <li>我是第01个li</li>
        <li>我是第02个li</li>
        <li>我是第03个li</li>
        <li>我是第04个li</li>
        <li>我是第05个li</li>
    </ul>

    <script>
        // document.querySelectorAll
        // document.getElementsByTagName()
        // document.querySelector()

        var oBox = document.querySelector("#box");
        //获取第一个儿子
        var ele = oBox.firstElementChild || oBox.firstChild;
        ele.style.backgroundColor = "red";
        ele.style.borderRadius = "5px";

        //最后一个儿子
        var ele = oBox.lastElementChild || oBox.lastChild;
        ele.style.backgroundColor = "pink";

        //获取指定的某一个
        oBox.children[2].style.backgroundColor = "green";

    </script>
父节点
 <div class="box">
      <div class="inner"></div>
    </div>

    <script>
      //parentNode 顶级是 document
      //parentElement顶级是null
      // var oBox = document.querySelector(".box");
      var oInner = document.querySelector(".inner");
      //找父节点  找'亲'父亲
      // console.log(oInner.parentNode);
      // oInner.parentNode.style.backgroundColor = "pink";
      // oInner.parentElement.style.backgroundColor = "green";
      console.log(oInner.parentNode.parentNode.parentNode.parentNode);//document
      console.log(
        oInner.parentElement.parentElement.parentElement.parentElement
      );//null
兄弟节点
nextSibling // 后一个
previousSibling //前一个
这篇关于DOM文本对象模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航