DOM解读

DOM概念 - document object model:文档对象模型

操作文档的一套方法,document是一个对象,是dom的顶级对象,属于window的一个对象,并且可以说是最出色的一个儿子。

DOM元素的获取:

  1. document.getElementById("id名字") //根据ID名字来获取标签;

  2. document.getElementByTagName("标签名") //根据标签名来获取;

  3. document.getElementByClassName("类名") //根据类名来获取;

  4. document.getElementByName("name的属性值") //根据name属性来获取;

  5. document.querySelector(css选择器) //根据CSS选择器来获取;

  6. document.querySelectorAll(css选择器) //根据CSS选择器来获取所有满足条件的元素;

    //3、5、6在IE中不兼容

DOM元素的操作:

内容操作:

  1. 元素.innerText //文本内容操作;

  2. 元素.innerHTML //带标签的内容操作;

  3. 元素.value //表单元素的内容操作(input类型)

  4. 元素.outText //包含自身的标签;

  5. 元素.outHTML //包含自身的标签;

属性操作:

  1. 元素.getAttribute("属性名") //获取属性的值,只能获取不能修改

  2. 元素.setAttribute("属性名","属性值") //修改属性的值,相当于重新设置

  3. 元素.removeAttribute("属性名") //删除属性

    //也可以直接通过"."来操作 元素.属性 = ""; //(通常不在标签上显示)

类名、样式操作:

  1. 元素.style.css(属性名) = "值";//设置样式;

  2. 元素.className = "值"; //设置class类名;

  3. 元素.className = ""; //清空class类名;

DOM节点:

概念:组成HTML页面的所有内容,都叫做节点;

组成: //(元素、文本、注释、属性等节点)

元素节点:(主要介绍)

元素节点的获取:

  1. 元素.children //获取所有的子元素;

  2. 元素.firstElementChild //获取第一个子元素;

  3. 元素.lastElementChild //获取最后一个子元素;

  4. 元素.previousElementSibling //获取上一个兄弟元素;

  5. 元素.nextElementSibling //获取下一个兄弟元素;

  6. 元素.parentElement //获取父元素;

元素节点的操作:

var td = document.createElement('td'); //创建标签节点

插入节点:

父元素.appendChild(子元素) //在父元素最后追加;

父元素.insertBefore(新元素,旧元素) //将新的元素插入到指定的子元素前面;

删除节点:父元素.remove(子元素);

复制节点:父元素.cloneNode(true);

//有true就会连标签里面的内容也复制出来,没有true只会复制空标签;

替换节点:父元素.replaceChild(新元素,旧元素) //使用新的子元素替换掉旧的元素;

获取元素节点的样式:

window.getComputedStyle(元素)

元素.currentStyle (IE兼容)

封装之后:

  1. function getStyle(ele,attr){

  2. if(window.getComputedStyle){

  3. return window.getComputedStyle(ele)[attr]

  4. }else{

  5. return ele.currentStyle[attr]

  6. }

  7. }

  8. var div = document.getElementsByTagName("div")[0];

  9. var w = getStyle(div,"width");

  10. console.log(w);

获取元素位置:

元素.offsetLeft 元素.offsetTop //这个就是于offsetParent的距离

元素.offsetParent //获取到定位是参考的那个设置过定位的父元素;

获取节点:

  1. 元素.childNodes //获取所有子节点;

  2. 元素.parentNode //获取父节点;

  3. 元素.firstChild //获取第一个子节点;

  4. 元素.lastChild //获取最后一个子节点;

  5. 元素.previousSibling //获取上一个兄弟节点;

  6. 元素.nextSibling //获取下一个兄弟节点;

节点属性:

节点属性 nodeType节点类型 元素节点1 文本节点3 注释节点8

nodeName节点名称 ​ 元素节点大写的标签名 ​ 文本节点#text ​ 注释节点#comment

nodeValue节点的值 ​ 元素节点null ​ 文本节点文本内容 ​ 注释节点注释的内容

获取/设置滚动过的距离

有文档声明的时候 ​ document.documentElement.scrollTop ​ document.documentElement.scrollLeft ​ 没有文档声明的时候 ​ document.body.scrollTop ​ document.body.scrollLeft

//做一个回到顶部的效果

获取浏览器大小

document.documentElement.clientWidth ​ document.documentElement.clientHeight ​ //不包含滚动条的尺寸

获取html基本结构

document.documentElement是html标签 ​ document.bodybody标签 ​ document.headhead标签 ​ document.titletitle标签

DOM解读的更多相关文章

  1. Jsoup代码解读之二-DOM相关对象

    Jsoup代码解读之二-DOM相关对象   之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多 ...

  2. 2014年辛星解读Javascript之DOM之冒泡和捕获

    上篇博客提到了Javascript事件绑定函数的三个參数.第一个是一个event.第二个是一个function.第三个是一个布尔变量.它用于指定事件传递的顺序,分为冒泡和捕获两种方式,接下来我们将揭开 ...

  3. 2014年辛星解读Javascript之用DOM动态操纵HTML元�

    关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...

  4. 解密虚拟 DOM——snabbdom 核心源码解读

    本文源码地址:https://github.com/zhongdeming428/snabbdom 对很多人而言,虚拟 DOM 都是一个很高大上而且远不可及的专有名词,以前我也这么认为,后来在学习 V ...

  5. 2014年辛星解读Javascript之DOM之事件及其绑定

    我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...

  6. React 16 源码瞎几把解读 【三 点 一】 把react组件对象弄到dom中去(矛头指向fiber,fiber不解读这个过程也不知道)

    一.ReactDOM.render 都干啥了 我们在写react的时候,最后一步肯定是 ReactDOM.render( <div> <Home name="home&qu ...

  7. 2014年辛星解读Javascript之DOM高速入门

    在Javascript的知识中,有一个所谓的DOM.即文档对象模型,我们能够通过它来訪问HTML文档的元素,当网页被载入的时候,浏览器会去创建DOM,有了这个DOM.我们能够使用Javascript去 ...

  8. React 16 源码瞎几把解读 【一】 从jsx到一个react 虚拟dom对象

    一.jsx变createElement 每一个用jsx语法书写的react组件最后都会变成 react.createElement(...)这一坨东西, // 转变前 export default ( ...

  9. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

随机推荐

  1. springboot学习笔记:10.springboot+atomikos+mysql+mybatis+druid+分布式事务

    前言 上一篇文章我们整合了springboot+druid+mybatis+mysql+多数据源: 本篇文章大家主要跟随你们涛兄在上一届基础上配置一下多数据源情况下的分布式事务: 首先,到底啥是分布式 ...

  2. sqlite基础API

    /* 打开/创建数据库文件 * 如果数据库文件不存在就创建数据库文件. * 数据库操作句柄保存在第二个参数中. * 第一个参数:文件路径及其文件名 * 第二个参数:sqlite3操作句柄 * 返回值: ...

  3. jquery框架概览(二)

    (function(window, undefined) { })(window) window对象作为参数传进闭包的好处 JavaScript 全局对象.函数以及变量均自动成为 window 对象的 ...

  4. considerate|considerable|content|Contact|Consult|deceived|

    ADJ-GRADED 替人着想的;体贴的Someone who is considerate pays attention to the needs, wishes, or feelings of o ...

  5. css3 - transform, transition 与 translate

    零.序言 css 3 的新特性,很多都停留在听说而非实际使用.transform, transition, translate 这三长得实在太像,刚开始的时候总是迷迷糊糊,分不清它们的功能.而最近新接 ...

  6. JDBC之BaseDao类

    package com.it.util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prep ...

  7. HTMLTestRunner测试报告

    把测试报告写入文件中,设置报告生成的路径 测试报告名称上添加时间 HTMLTestRunner文件如下,复制即可用,把该文件放在Lib下即可 """ A TestRunn ...

  8. git 学习 3

    远程仓库 添加远程库 GitHub 注册账号并建立 repository,Clone with SSH 1 $ ssh-keygen -t rsa -C "youremail@example ...

  9. JDK_Packages_java_utils

    utils包需要关注的主要有 ​ 集合框架.并发包.函数式编程.观察者模式@see PropertyChangeSupport java.util(集合框架) Contains the collect ...

  10. Redis 机器内核参数优化

    " > /proc/sys/vm/overcommit_memory echo never > /sys/kernel/mm/transparent_hugepage/enabl ...