DOM操作

 document类型

​
// 1.获取html根元素 
    console.log(document.documentElement);
    // 2.获取body标签 
    console.log(document.body);
    // 3.获取选项卡标题
    console.log(document.title);
    // 4.获取文档url 
    console.log(document.URL);
    // 5.获取域名
    console.log(document.domain,'获取域名');
    // 6.获取文档头信息 
    console.log(document.doctype);
    // 7.获取页面来源
    console.log(document.referrer,'获取页面来源');
    // 8.获取页面中所有form标签
    console.log(document.forms)
    // 9.获取页面中所有img标签
    console.log(document.images)
    // 10.获取页面中所有的a标签 只能获取带有href属性
    console.log(document.links);

​

获取dom元素

​
/**
     * querySelector 返回第一个css选择器匹配到的元素
     * querySelectorAll 返回所有css选择器匹配到的元素
    */
    console.log(document.querySelector('div'));
    console.log(document.querySelector('#one'));
    console.log(document.querySelector('.one'));
    console.log(document.querySelectorAll('div'));
    /**
     * getElementById() 通过id获取元素
    */
   console.log(document.getElementById('one'),'获取id为one元素');
   /**
    * getElementsByClassName 通过类名获取元素
   */
  console.log(document.getElementsByClassName('one'));//类数组对象 
  /**
   * 通过标签名获取元素
  */
  console.log(document.getElementsByTagName('div'),'通过标签名获取元素');
  /**
   * getElementsByName 通过name属性获取标签
  */
  console.log(document.getElementsByName('username'));

操作方法

1.创建一个节点createElement

2.给元素 设置文本内容 innerHtml innerText

3.新增一个元素节点 appendChild

4.插入节点 insertBefore(要插入的节点,参考节点)

5.替换节点 replaceChild(替换的节点,被替换的节点)

6.删除节点 removeChild(要删除谁)

var div =  document.createElement('div');
div.textContent = 'four';
document.body.appendChild(div);
document.body.insertBefore(div,two);
 document.body.replaceChild(div,one);
document.body.removeChild(two);

克隆节点

什么是深克隆，什么是浅克隆

     * 1.深克隆指的是既克隆节点的样式，还克隆节点内容

     * 2.浅克隆指的是只克隆节点的样式

// 克隆节点   cloneNode(true/false) 默认是false 浅克隆 true深克隆
    var newNode = div.cloneNode(true);
    document.body.appendChild(newNode);

获取元素内部内容方式以及区别？ *******************

     * 1.textContent 保留代码格式 只能获取文本内容

     * 2.innerHTML 保留代码格式 可以识别代码片段  v-html

     * 3.innerText 去除前后空格 中间多个空格会被解析为一个空白

 var parent = document.getElementById('parent');
    console.log(parent.textContent);
    console.log(parent.innerHTML);
    console.log(parent.innerText);
    // 向文档写入标签或者文本
    document.write('<h1>一级标题</h1>');

Element类型

var one = document.getElementById('one');
    // 返回元素属性组成的集合
    console.log(one.attributes);
    // 返回属性类名组成列表 类数组对象
    console.log(one.classList);
    // 修改元素类名 
    // one.className = 'new';
    // 返回元素类名
    console.log(one.className);
    console.log(one.clientHeight, '获取元素内部高度');
    console.log(one.clientWidth, '获取元素内部宽度');
    // 修改元素内部内容  innerText 识别代码片段 解析字符串中标签
    one.innerText = '<h1>段落标签</h1>';
    /**
     * 获取属性getAttribute('属性名')
    */
    console.log(one.getAttribute('id'));
    /**
     * 给元素设置属性 setAttribute('属性名','属性值')
    */
    one.setAttribute('title', '我是div的title');
    // 设置自定义属性
    one.setAttribute('flag', '我是自定义属性');
    // 给元素或者标签设置css样式 
    one.style.width = '100px';
    one.style.height = '100px';
    one.style.backgroundColor='pink';
    one.style.fontSize = '20px';

Text类型

// 创建文本
    var TextNode  = document.createTextNode('hello world');
    var div = document.querySelector('div');
    // 添加文本 
    TextNode.appendData('hi');
    // 插入文本 beginIndex '插入的字符'
    TextNode.insertData(0,'dom');
    // 替换文本 beginIndex count '替换字符'
    TextNode.replaceData(0,5,'我被替换了');
    // 删除文本 参数:beginIndex count 
    TextNode.deleteData(0,5);
    div.appendChild(TextNode);
    console.log(TextNode.nodeType);