zoukankan      html  css  js  c++  java
  • DOM重点核心-基础

     获取元素有哪两种方法方法?

    1 利用DOM提供的方法获取元素。

      document.getElementbyId(),document.getELmenntbyTagName()

      document,getElementsByClassName('')

      document.querySelector(''),document.querySelectorAll()(+ ‘.','#','')

    2 利用 节点层级关系。获取元素。 父子元素。(兼容性较差,逻辑性强!!!)

    节点有3中:元素节点。属性节点。文字节点。

    我们在实际开发中,主要操作的是元素节点!

    nodeName:

    nodeType : 元素节点1,属性节点2 ,文本节点3.

    nodeValue:

    3种关系节点:

    父亲节点:parentNode:

    孩子节点:

    1childNodes,  2 children。(实际开发经常使用!)

    第一个元素节点:有3种写法。

    firstChild,firstElementChild,children[0](第三个用多!)。

    最后一个元素的写法:有3种元素:

    lastChild,lastElementChild, children[obecj.children.length -1 ])(第三个用的多);

    兄弟节点:

    换行也是一个文本节点。

    node.nextSibling,node.previousSibling

    node.nextElementSibling,node.previousElementSibling

    先创建,在添加。

    创建节点:动态创节点的。

    document.createElement('tagName')

    添加节点:

    第一种方法:node.appendChild(Child);前面是node是父亲,Child是孩子。

    第二种方法:node.insertBefore(lili,ul.children[0]);

    删除节点:

    node.removeChild(child)删除父元素的子节点!

    复制节点(克隆节点):

    node.cloneNode();

    node.cloneNode(true);为True;深拷贝,拷贝内容!

    3种动态创建元素的

    1. document.write(); 文档流创建结束,文档流执行完毕,则会导致页面全部重绘。

    window.onload= function(){};页面玩,记载完,调用。

    2. element.innerHTML; 将内容写入某个DOM节点,不会导致全部重绘,

    innerHTML创建多个元素效率更高,不要采用拼接字符串,采取数组形式拼接,那么效率更高!

     inner.innerHTML += '<>百度</>'

    3. document.createElement; 时间很快,效率很高!

    var a =document. 

    create.appendChild(a); :创建结构很清晰。效率稍微低一些。

    DOM重点核心:

    创建: 1documen.write 2  innerHTML 3 createElement

    增加: 1appendChild。 2 insertBefore

    删:removeChild

    改:修改dom元素属性,内容,属性,表单的值。

      1.修改元素属性: src,href,title

      2. 修改普通元素内容:innerHTML,innerText。

      3. 修改表单元素:value,type,disabled

      4. 修改元素样式:style,className

    查:1DOM 古老使用: getElementByld,getElementByTagName

    2 H5提供新方法,querySelector,querySelectorAll提倡。

    3 利用节点操作获取元素:parentNode,children,nextElementSibling提倡。

    自定义属性:保存属性。 

    1 setAttribute。 2 getAttribute 。3 removeAttribute

    事件操作:事件源,事件类型 = 事件处理程序。

  • 相关阅读:
    Codeforces Round #336 (Div. 2) A. Saitama Destroys Hotel 模拟
    UVA 10341 二分搜索
    cscope 的使用
    2018年各大互联网前端面试题三(阿里)
    【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
    【前端统计图】echarts实现单条折线图
    【前端统计图】echarts实现简单柱状图
    css实现悬浮效果的阴影
    通过select下拉框里的value控制div显示与隐藏
    2018年各大互联网前端面试题四(美团)
  • 原文地址:https://www.cnblogs.com/hacker-caomei/p/14879300.html
Copyright © 2011-2022 走看看