javascript中DOM总结(一)

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>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值