JS 的 Element元素对象入门知识_元素菜鸟教程

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。Element对象的属性和方法1.元素特性相关属性  element.id 设置/返回元素的id  element.tagName 设置/返回元

JS 的 Element元素对象入门知识

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。

JS 的 Element元素对象入门知识_元素菜鸟教程

Element对象的属性和方法

1.元素特性相关属性

  element.id    设置/返回元素的id

  element.tagName    设置/返回元素的标签名

  element.dir    设置/返回元素的文字方向

  element.accessKey    设置/返回元素的快捷键

  element.draggable    设置/返回元素的是否可拖拽

  element.lang    设置/返回元素的语言

  element.tabIndex    设置/返回元素的在Tab键遍历时的顺序,-1表示不可被遍历

  element.hidden    设置/返回元素 是否可见

  element.contentEditable    设置/返回元素  是否可编辑

  element.isContentEditable    返回元素  是否可编辑 

2.元素状态相关属性

  element.attributes    设置/返回元素的属性,返回一个类似数组的对象。

  element.className    设置/返回元素的类名,它的值是一个字符串,每个class之间用空格分隔

  element.classList    设置/返回元素的类名,返回一个类似数组的对象。

  element.innerHTML    设置/返回元素包含的所有HTML代码

3.盒模型相关属性

  element.clientHeight    返回元素的CSS高度,只对块级元素有效,行内元素返回0。  除了元素本身的高度,还包括padding(不包括border、margin)。如果有滚动条还要减去水平滚动条的高度。

    document.body.clientHeight  网页总高度  大于>    document.documentElement.clientHeight  浏览器窗口高度(减去滚动条的高度)

  element.clientLeft,  element.clientTop     返回元素左边框的宽度,不包括padding和margin

  element.scrollHeight,  element.scrollWidth    返回当前元素的总高度,包括溢出容器部门,包括padding、伪元素高度不包括border、margin、滚动条。

  element.scrollLeft,  element.scrollTop    返回当前元素向右滚动的px

    如果要查看整张网页的水平的和垂直的滚动距离,要从document.documentElement元素上读取

  element.offsetHeight,  element.offsetWidth    返回元素的垂直高度,包括heigth、padding、border、滚动条高度。

  element.offsetLeft,  element.offsetTop   返回当前元素 左上角位移

4.节点属性

  element.appendChild()    为元素添加一个新的子元素

  element.children,  element.childElementCount

  element.firstElementChild,  element.lastElementChild

  element.nextElementSibling,  element.previousElementSibling

  element.offsetParent

5.属性相关方法

  element.getAttribute()  返回同名属性的值

    element.setAttribute()

    element.removeAttribute()

    element.hasAttribute()

  element.querySelector()   返回匹配的第一个元素

  getElementsByTagName    返回指定标签名的所有子元素集合

  getElementsByClassName

6.事件

       监听事件都继承 EventTarget接口

    element.addEventListener()    添加事件监听函数

    element.removeEventListener()    移除

    dispatchEvent()    触发事件

  scrollIntoView()  滚动到当前元素

  element.focus()    设置元素获取焦点

海计划公众号
(0)
上一篇 2020/03/26 23:31
下一篇 2020/03/26 23:31

您可能感兴趣的内容

  • 如何在工作中快速成长?致工程师的10个简单技巧菜鸟攻略_工作小白基础

    阿里妹导读:阿里有句非常经典的土话,“今天的最好表现,是明天的最低要求。”如何挖掘潜能、发现更好的自己?今天,阿里巴巴高级无线开发专家江建明将认知升级的方法总结出来,帮助你获得快速成长的秘诀(本文内容稍长但值得细细阅读哦)。一、如何阅读本文?找一个固定不被打扰时间仔细阅读。在碎片化的时间中,每次读完一段内容。最重要的是每次做到只字不差的阅读,然后停下,带着批

    2020/03/30
  • 简历本使用教程_在线免费简历制作平台

    简历本使用教程 官方网址:http://www.jianliben.com/ 简介描述:在线免费简历制作平台 简历本是一个专业免费的在线简历制作平台,为求职者提供丰富的简历模板,求…

    2020/03/11
  • 程序员聊天指南,建议先码后看入门百科_指南使用教程

    很多接触过程序员的人,都有一种体会:程序员=聊天终结者。经常用简短有力的几个字结束掉你苦心经营的聊天氛围,比如:“你现在忙不忙?”“忙。”那我真的是打扰了,内心显露出微笑脸:“你跟我说说……”“不说。”你牛逼啊,跟程序员深入聊天是不可能的,这辈子都不可能。“你能不能……”“不能。”什么需求不需求的,人家根本不想理会,这个需求做不了!甚至当程序

    2020/03/23
  • 常用颜色表之中国传统颜色基础指南_颜色零基础入门

    不知道大家觉得如何,舒适的颜色,很多人都会喜欢,但主要还是看实用性。今天给大家分享中国传统颜色有那些?中国传统的颜色之美,美如其名:蔚蓝、竹青、绯红、月白、石青、紫檀、霜色、黛绿、胭脂、藕荷、豆绿、宝蓝、秋香、玄色、牙色、黄栌、靛蓝、明黄、朱砂、石绿。。。。。。颜色名称十六进制红绿蓝色相饱和度亮度蔚蓝#70f3ff112243255185°100.0%71.

    2020/03/26
  • Animatic.js小白知识_可同时运行上百个对象动画的框架

    Animatic.js小白知识 官方网址:http://lvivski.com/animatic/ GitHub:https://github.com/lvivski/animat…

    2020/03/06
  • 前端开发Code Review内容【vue记录】基础入门_Review使用帮助

    代码审查的重要性,对码农来说自是不言而喻, 这里记录一次 Code Review的简单纪要,主要以代码审查优化内容为主。一、Import引入路径路径尽量使用别名的方式,有效避免相对路径的书写麻烦,以及项目的移植和扩展等。建议使用别名,代替使用相对路径。
    扩展vue.config.js,比如:
    config.resolve.alias.set(‘@$’, ‘.

    2020/03/26
  • Chrome无法从该网站添加应用,扩展程序和用户脚本小白知识_网站小白基础

    更新谷歌浏览器之后发现不能通过本地 crx文件安装离线插件了,网上找到的方法有两种 :一个就是通过添加浏览器参数解决 但是这个方法我尝试之后失败了 第二个方法就是用工具安装,具体如何太麻烦了就没有用 解决过程1. 把需要安装的.crx文件后缀改成 .rar (一定是这个 反正360压缩改成zip是不能正确解压的)2. 解压之后 打开浏览器的安装拓展程序界面

    2020/04/03
  • js中的Object.defineProperty()和defineProperties()指南攻略_object基础指南

    Object.defineProperty()1、作用:该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象2、创建属性:如果对象中不存在指定的属性,Object.defineProperty()就创建这个属性,当描述符中省略某些字段时,这些字段将使用它们的默认值(拥有布尔值的字段的默认值都是false。value,get和s

    2020/03/30
  • watch监听对象基础知识教程_watch菜鸟教程下载

    1、watch// DOM
    {{obj.a}}
    data() {return {name: ‘a’};},watch: {name: function(value,oldValue) {console.log(value, oldValue);}},

    2020/03/23
  • js判断浏览器内核是否是safari浏览器攻略教程_浏览器小白攻略

    代码:/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);说明:PC端只有Chrome有Safari字段吗?为什么不需要判断其他浏览器?其实360,QQ等浏览器的userAgent字段也会带有Safari字段,但是由于他们基于Chrome二次开发的,所有也会携带有

    2020/03/24
  • 如何用apply实现一个bind?小白指南_apply入门基础教程

    面试题:如何用apply实现一个bind?bind说明bind函数在 ES5 才被加入,所以并不是所有浏览器都支持,IE8及以下的版本中不被支持,如果需要兼容可以使用 Polyfill 来实现。
    bind方法与call/apply最大的区别就是bind返回一个绑定上下文的函数,而call/apply是直接执行了函数,特性如下:可以指定this
    返回一个绑

    2020/03/20
  • IM即时通讯方案之第三方有哪些?基础知识入门_IM使用说明

    选择第三方即时通讯方案,我们应该从以下方面进行考虑:1、稳定性: 2、安全性: 3、功能性: 5、费用: 6、运维服务: 7、企业规模: 8、升级策略: 9、SDK支持: 10、服务: 11、通信协议: 有哪些第三方IM即时通讯呢?1、融云包括 IM 免费版和 IM 商用版,能够满足各类沟通场景的使用需求。免费支持消息总分发量高达 1,000 万条/日(每个

    2020/04/03
  • 设计师该不该学Web前端?入门教程究竟需不需要了解HTML和CSS_设计小白攻略

    先说说大家平时最苦恼的设计稿还原度问题,一个视觉超赞的稿子,怎么到了前端手里,字体边距就乱七八糟呢?为什么没对齐,为什么没加粗,还有说好的动效怎么都没上,完全不是情感化设计了啊。仿佛听到前端工程师喊冤的声音,没错啦,这其实不能怪前端,在设计师眼中一个简单的调色,对前端而言可能要重写样式。而一个简单的动效,他们可能要花上几天去实现。虽然彼此都没有错,但角度的不

    2020/04/03
  • Scene.js基础入门_一个基于 JavaScript 时间轴的动画库

    Scene.js基础入门 官方网址:http://daybrush.com/scenejs/ GitHub:https://github.com/daybrush/scenejs …

    2020/03/07
  • JS之继承(ES5 & ES6)入门攻略_继承使用指南

    定义继承到底是什么?维基百科是这样说的:继承(英语:inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法。var a = new Array()
    a.valueOf()上面的a为什么可以使用val

    2020/03/29
  • 使用canvas实现给图片添加平铺水印基础知识教程_canvas菜鸟知识

    最近项目中遇到一个需求,需要把一张图片加上平铺的水印 首先想到的是用canvas完成这种功能,因为我之前也没有接触过canvas,所以做这个功能的时候,就是一步一步的摸索中学习,过程还是挺nice的,接下来跟我一步步来实现这个功能以及发现一些canvas的坑吧。因为这个功能需要的都是一些canvas基础的api,也不涉及什么原理性的问题,这里我就直接贴js代

    2020/03/29