javascript中DOM总结（一）

最新推荐文章于 2022-11-03 15:40:24 发布

卖菜的小白

最新推荐文章于 2022-11-03 15:40:24 发布

阅读量261

点赞数

分类专栏： dom 文章标签： dom javascript

本文链接：https://blog.csdn.net/weixin_47450807/article/details/114473823

版权

dom 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

javascript中DOM总结（一）

一、Node类型

 let div = document.getElementById("div");
    console.log(div.nodeType);  1
    console.log(div.nodeName);  DIV
    console.log(div.nodeValue); null

解析：因为nodeType为1，为标签类型，所以可知其nodeValue一直为空，并且nodeName就是标签名。
childNodes(), item(), length
childNodes()表示子节点的个数
item(n)可以取出第几个节点
length可以取出节点的长度

    let div = document.getElementById("div");
    // console.log(div.childNodes);   //childList(5)
    console.log(div.childNodes[0].nodeValue);      //1
    console.log(div.childNodes.item(1).nodeName);  //A
    // 将类数组转化成数组
    console.log(typeof div.childNodes);
    // 方法一、
    let arrayOfNodes = Array.prototype.slice.call(div.childNodes,0);
    console.log(arrayOfNodes);
    // ES5的方法
    let arrayOfNodes = Array.from(div.childNodes);
    console.log(arrayOfNodes);

解析：注意这里所得到的是伪数组就是HTMLCollection，可以使用数组的一些性质，当然也可以将其转化成数组。上面转化成数组的两种方法。
parentNode,previousSibling,nextSibling
** parentNode:表示该节点的父节点**
previousSibling:表示该节点的前一个节点，如果不存在，则为null
nextSibling:表示该节点的后一个节点，如果不存在，则为null

    let parent = document.querySelector(".father");
    console.log(parent.childNodes.item(2).parentNode);
    console.log(parent.childNodes.item(2).previousSibling);
    console.log(parent.childNodes.item(2).nextSibling);

firstChild,lastChild，hasChildNodes()，ownerDocument
firstChild：返回的是该节点的第一个子节点，包含文本节点
lastChild：返回的是该节点的最后一个子节点，包含文本节点
hasChildNodes：用来判断该节点是否存在子节点
ownerDocument:返回的是整个html文档

  let father = document.querySelector(".father_2");
    console.log(father.firstChild);
    console.log(father.lastChild);
    console.log(father.hasChildNodes());  //判断一个节点是否存在子节点
    console.log(father.ownerDocument);       //返回整个html标签中的全部内容

appendChild(),insertBefore(),replaceChild(),removeChild()
appendChild()：向一个节点的最后插入子节点
insertBefore():在某一个节点的前面插入节点
replaceChild():将某一个节点替换成另一个节点
removeChild():删除某一个节点

    let father = document.querySelector(".father");
    father.appendChild(father.firstChild);
    father.insertBefore(father.lastChild,father.firstChild);
    let newNode = document.createElement("a");
    father.replaceChild(newNode,father.firstChild);
    father.removeChild(father.firstChild)

closeNode()

let ul = document.querySelector("ul");
    let ul_1 = ul.cloneNode(true);
    let ul_2 = ul.cloneNode(false);
    console.log(ul_1);  //复制标签以及其中的内容
    console.log(ul_2);  //只是复制标签

解析：这个方法传入布尔值，表示是否深拷贝，深拷贝就是将该节点下面的全部节点都拷贝完全，而当传入的值为false的时候，只是拷贝标签。并且这里是不能拷贝事件的。
normalize()

let Btns = document.querySelectorAll("button");
    Btns[0].onclick = function(){
      let text = document.createTextNode("201902091");
      let InputText = document.querySelector(".text");
      InputText.appendChild(text); 
    }
    Btns[1].onclick = function(){
      let InputText = document.querySelector(".text");
      InputText.normalize();
    }

normalize()的作用就是将文本子节点合并，并且将文本子节点为空的删除。

二、Document类型

document.doctype

 console.log(document.doctype);  //<!DOCTYPE html>

document.body

console.log(document.body);  //body标签以及其中全部内容

document.documentElement

console.log(document.documentElement);   //HTML以及其中全部内容

注意：document中只有一个子元素是HTML，所以不支持插入等相关操作

document.title文档的标题，可以进行修改

      console.log(document.title); 
      document.title = "hhh";

document.URL

console.log(document.URL);//获取完整的url地址

document.domain

console.log(document.domain);  //如果在本机服务器上，则显示的是127.0.0.1

document.referrer

console.log(document.referrer);  //表示从什么地方连接过来的

namedItem(name) 在类选择器中可以根据name来选择标签。

      let Images = document.getElementsByTagName("img");
      let img = Images.namedItem('myImage');
      let img = Images['myImage'];
      console.log(img);

document.getElementsByName() 这里是通过name来获取标签。
document.anchors返回的是带有name的a
document.forms相当于document.getElementsByTagName()
document.images相当于取出文档中全部的img元素
document.links 相当于取出全部带有link的a元素
document.write()和document.writeIn()前面的不换行，后面的进行换行。

三、Element类型

getAttribute()用来获取标签的属性，一般用它来获取自定义的，原因是他和DOM对象访问属性之间存在差别

    let div = document.getElementById("myDiv");
    console.log(div.getAttribute("style"));   //background-color: brown;
    console.log(div.style);  //CSSStyleDeclaration

    console.log(div.onclick);  
    console.log(div.getAttribute('onclick'));

解析：因为在访问属性的时候，存在两点差别①style属性访问的差别②事件属性访问的差别，
所以一般在自定义的属性中使用getAttribute()。
HTML5中如果设置自定义属性前面必须加上data-
console.log(div.getAttribute(“data-setc”));
setAttribute()用来给元素设置属性，如果该属性存在，则直接更改，如果不存在则直接添加
removeAttribute()用来删除属性
document.createElement()创建元素，当创建完成后，就会将其ownerDocument指向document。
当使用childNodes（）来获取后代的时候，可以使用nodeType来筛选后代

      let ul_style = document.getElementById("ul_style");
      let li = ul_style.getElementsByTagName('li');
      console.log(li.length);  //7

      // 先获取全部的子元素，然后再进行判断
      let ul_style = document.getElementById("ul_style");
      let li = ul_style.childNodes;
      // console.log(li.length);
      let num =0;
      for(let i =0;i<li.length;i++){
        if(li[i].nodeType == 1){
          num++;
        }
      }
      console.log(num);

四、Text类型

    let myDiv = document.getElementById("myDiv");
    myDiv_text = myDiv.childNodes[0];
    console.log(myDiv.childNodes[0].nodeType);  //3
    console.log(myDiv.childNodes[0].nodeValue);  //123

除了使用上面的方法修改值，也可以使用appendData来进行修改，使用appendData()可以在文本的最后添加一个文本内容。

    myDiv_text.appendData("0");
    deleteData()//删除文本
    myDiv_text.deleteData(2,4);
    // insertData插入节点
    myDiv_text.insertData(2,111);
    splitText()//将文本拆分成两个
    myDiv_text.splitText(3);
    substringData() //从第一个参数的位置，到第一个参数的位置加上3
    let my = myDiv_text.substringData(3,3);
    console.log(my);

创建文本并且插入文本

    let div = document.createElement("div");
    let textNode = document.createTextNode("大家好");
    div.appendChild(textNode);
    document.body.appendChild(div);

创建文本并且插入文本，并且插入两个,这样插入文本没有空格

let div = document.createElement("h1");
    let firstText = document.createTextNode("大家好");
    let anther = document.createTextNode("我是dl");
    div.appendChild(firstText);
    div.appendChild(anther);
    document.body.appendChild(div);

splitText() 将文本分割开来

  let div = document.createElement("div");
    let first = document.createTextNode("大家好我是dl");
    div.appendChild(first);
    console.log(div.childNodes.length);
    div.firstChild.splitText(3);
    console.log(div.childNodes.length);

五、comment类型

<div><!-- 大家好 --></div>
<script>
  let div = document.getElementsByTagName("div")[0];
    console.log(div.childNodes.length);   //1
    console.log(div.childNodes[0].nodeType);     //8
    console.log(div.childNodes[0].nodeValue);   // 大家好
</script>

Comment类型和文本类型类似
创建一个注释

 let comment = document.createComment("hello world");
    document.body.appendChild(comment);

六、DocumentType类型

console.log(document.doctype.name);   // html
console.log(document.doctype);   //<!DOCTYPE html>

七、DocumentFragment类型

    let myUl = document.getElementById("myUl");
    let fragment = document.createDocumentFragment();
    for (let i = 0; i < 3; i++) {
      let li_style = document.createElement("li");
      li_style.appendChild(document.createTextNode(`这里是${i}`));
      fragment.appendChild(li_style);
    }
    myUl.appendChild(fragment);

由于li标签每插入一个，都会将页面重新渲染一遍，所以可以使用文档片段，将全部的li标签插入其中，最后将fragment插入到整个文档流中，所以最终仅仅需要渲染一遍。并且fragment不在文档中进行显示

八、Attr类型

其中存在name,value,specified属性。name表示属性名，value表示属性值，specified表示属性使用的是默认值还是被指定的值。

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="myDiv"></div>
  <script>
    let myDiv = document.getElementById("myDiv");
    let attr = document.createAttribute("align");
    attr.value = "left";
    myDiv.setAttributeNode(attr);
    console.log(myDiv.getAttributeNode("align").value);
    console.log(myDiv.attributes['align'].value);
    console.log(myDiv.getAttribute("align"));
  </script>
</body>
</html>