zoukankan      html  css  js  c++  java
  • DOM相关知识点

    1、DOM
    概念:document object model
    作用:提供了可以通过JS操作文档节点的方式

    2、学习DOM包括:
    (1)获取节点的方式(6种)
    document.getElementById();
    docuement.getElementSByClassName();
    document.getElementsByTagName();
    document.getElementsByName();
    document.querySelector();
    docuemnt.querySelectorAll();

    (2)查找节点的方式
    childNodes 查找元素节点+文本节点
    children 查找元素节点
    nextSibling 查找下一个节点(可能是元素节点或文本节点)
    nextElementSibling 查找下一个元素节点
    previousSibling 查找上一个节点(可能是元素节点或文本节点)
    previousElementSibling 查找上一个元素节点
    parentNode等同于parentElement 查找父元素节点
    firstElementChild
    lastElementChild

    (3)节点属性的操作
    【添加属性】
    =====元素默认拥有的属性(eg:class、id、title、src、href......)======
    添加属性:info.title info.href......
    添加特定属性:info.className labels[0].htmlFor

    =====不是元素自带属性,需要使用setAttribute()来添加属性========
    info.setAttribute('index',123);
    info.setAttribute('class','memeda');

    【获取属性】
    ============获取元素默认拥有的属性=============
    console.log(info.title);
    console.log(info.className);

    =====不是元素自带属性,需要使用getAttribute()来添加属性========
    info.getAttribute('index');
    info.getAttribute('class');

    【删除元素属性】
    ============删除元素默认拥有的属性=============
    info.className = ' ';
    info.title = ' ';
    =====不是元素自带属性,需要使用removeAttribute()来添加属性========
    info.removeAttribute('index');
    info.removeAttribute('class');

    (4)节点样式的操作
    (1)直接操作元素的CSS属性 -- 适用于要设置的属性较少的情况下
    (2)通过给元素添加和移除类名或ID名,控制元素的样式

    3、特定元素节点获取方式
    (1)获取window: window
    (2)获取document: window.document等同于document
    (3)获取HTML: document.documentElement
    (4)获取body: docuemnt.body
    (5)获取title: document.title
    (6)获取页面中所有的form: document.forms
    (7)获取页面中所有的img: document.images
    (8)获取页面中的a链接: document.links

  • 相关阅读:
    [JOYOI1326] 剑人合一
    linux hive +mysql(mysql用于hive元数据存储)
    hadoop 伪分布式单机部署练习hive
    pyhton 操作hive数据仓库
    python操作hadoop HDFS api使用
    hadoop伪集群部署
    python 文件指针切割文件
    jdk8 permgen OOM再见迎来metaspace
    java JVM内存区域模型
    java垃圾回收
  • 原文地址:https://www.cnblogs.com/sherryStudy/p/dom.html
Copyright © 2011-2022 走看看