• DOM中Element对象常用属性与方法大全


            如<table border="1" width="200" height="200" cellspacing="0" align="center">,他会在网页上显示出一个表格,他还有一些属性。

            在DOM中,这个table元素就是一个节点对象Element object。

            下面将要了解:1,使用JavaScript查询,增添,删除,修改元素的属性;2,使用JavaScript获取一个元素在网页中的布局情况;3,使用JavaScript给元素增加事件方法。 

            Element对象对应网页的HTML元素。每一个HTML元素,在DOM树上都会转化成一个Element节点对象(以下简称元素节点),即Element Node。Element对象的属性与html标签的属性大同小异,例如class,id,name这些属性是Element对象和html元素共有的的。


    目录

    一,Element对象属性一览

    二,Element对象属性详解

    1,Element.id属性

    2,Element.className属性

    3,Element.classList对象

    4,Element.innerHTML()方法

    5,Element.innerText()方法

    二,Element对象位置属性大全

    1,总览

    2,client

    3,scroll

    4,offset

    三,Element对象的方法大全

    1,总览

    2,Element.focus()方法

    3,Element.blur()

    4,Element.remove()

    5,Element.getBoundingClientRect() 

    四,Element对象属性的操作

    1,总览

    2,Element.getAttribute()

    3,Element.setAttribute()

    4,Element.hasAttribute()

    5,Element.removeAttribute()

    6,dataset属性


    一,Element对象属性一览

            Element对象指的是html元素,例如div,p,img等。他们的属性如id,classname,classlist与html元素的属性是一致的。


    二,Element对象属性详解

    1,Element.id属性

            Element.id 属性返回指定元素的id属性,该属性可读写(通过js修改元素的id属性的值)。

    1. //<p id="foo">
    2. var p = document.queryselector('p');//获取<p>标签节点对象
    3. p.id // "foo"

    2,Element.className属性

            className属性用来读写当前元素节点的class属性。它的值是一个字符串(即把所有class的属性值加上引号返回),每个class属性值之间用空格分割。 

    1. <body>
    2. <p class="p1 p2 p3" id="p"></p>
    3. <script>
    4. var p_obj = document.getElementById('p');
    5. console.log(p_obj.className);<!--打印出:p1 p2 p3-->
    6. </script>
    7. </body>

    3,Element.classList对象

            他是一个对象,当一个元素存在多个class属性值时,而且需要对class的多个属性值进行增删改查等操作,可以使用classlist对象,它将class所有的属性值打包成一个伪数组对象,进而操作属性值。classList对象有下列方法:

    add():增加一个class。

    remove():移除一个class。

    contains() :检查当前元素是否包含某个class。

    toggle():将某个class移入或移出当前元素。

    1. var div = document.getE1ementById('myDiv');//获取元素节点对象
    2. div.classList.add('mycssclass');//给div元素节点添加一个class属性值,值为myclass
    3. div.c1assList.add('foo','bar');//给class属性再添加两个值value
    4. div.classList.remove('mycssclass');
    5. div.classList.toggle('mycssclass'); //如果mycssclass不存在就加入,否则移除
    6. div.classList.contains('mycssclass');//存在返回true否则false

    4,Element.innerHTML()方法

            作用:获取或者修改一个元素节点里面嵌套的所有html代码内容。

            不加括号时,Element.innerHTML是一个属性,返回一个字符串,等同于该元素包含的所有HTML代码。

            该属性可读写,常用来设置某个节点的内容。它能改写所有元素节点的内容,包括<HTML>和<body>元素。

            例如:若:<p>→Element,则:Element.innerHTML('<a herf='#'>666</a>')的内容会出现在网页上,也就是:<p><a herf='#'>666</a></p>,这句代码会被浏览器渲染从而666字符串被加上超链接。

    1. <div id="root" class="c1 container">容器</div>
    2. <script>
    3. var root = document.getElementById("root");
    4. console.log(root.innerHTML);
    5. root.innerHTML ="<a herf='#'>666</a>";
    6. </script>

    5,Element.innerText()方法

            innerText和innerHTML类似,不同的是innerText无法识别元素,会直接渲染成字符串。

            就是说,innerHTML的参数字符串里含有html语法的话,会被浏览器直接解析。

            而innerText直接把参数当做是字符串。

    二,Element对象位置属性大全

            这里的位置属性指的是:相对于父级元素或者浏览器的位置属性。比如body.clientHeight表示显示的网页总高度,document.documentElement.clientHeight表示的视口(viewpoint)的高度。

            可以简记为:client,scroll,offset。

            client表示:元素自身的内容及被内容撑开的大小,只返回在网页上显示范围内的大小。

            scroll表示:具有隐藏内容的元素的总高度。相比于client把隐藏部分加上去了。

            offset表示:css盒模型整个元素的大小。

            width和height指的是自身大小,left和top指的是相对于上一层元素的位置。

    1,总览

    2,client

    3,scroll

            显示的是相对于视口上下滚动的多少像素。

    4,offset

            需要父级元素存在定位的css样式才会是相对于父级元素,若父级元素没有定位则一直向上找。

    三,Element对象的方法大全

    1,总览

    2,Element.focus()方法

            当一个元素使用这个方法之后,会自动获取焦点,相当于被鼠标点击。

    3,Element.blur()

            Element.blur方法用于将焦点从当前元素移除。

    4,Element.remove()

            Element.remove方法用于将当前元素节点从它的父节点移除。移除之后不会再在网页上显示。

    5,Element.getBoundingClientRect() 

    四,Element对象属性的操作

    1,总览

            例如:<table border="1" width="200" height="200" cellspacing="0" align="center">,这个元素里面有很多的属性,下面将介绍使用js来修改这些属性。

    2,Element.getAttribute()

            Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在,则返回null。

    1. //HTML代码为
    2. <div id="div1" align="left">
    3. var div = document.getElementById('div1');
    4. div.getAttribute('align') // "left"

    3,Element.setAttribute()

            Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在,则相当于编辑已存在的属性。若之前不存在某个属性则会添加上去

    1. var d = document.getElementById('d1');
    2. d.setAttribute('align','center');
    3. //下面是对img元素的src属性赋值的例子
    4. var myImage = document.queryselector('img');
    5. myImage.setAttribute('src','images/1.png'); 

    4,Element.hasAttribute()

            Element.hasAttribute方法返回一个布尔值,表示当前元素节点是否包含指定属性

    1. var d = document.getElementById('box');
    2. if (d.hasAttribute('align'))
    3. {
    4. d.setAttribute('align','center' );
    5. }

    5,Element.removeAttribute()

            Element.removeAttribute方法用于从当前元素节点移除属性。

    1. // HTML代码为<div id="box" align="left" width="200px">
    2. document.getElementById('box').removeAttribute('align');
    3. //现在的HTML代码为<div id="box" width="200px">

    6,dataset属性

            有时,需要在HTML元素上附加数据,供JavaScript脚本使用。一种解决方法是自定义属性使用标准提供的data-*属性。

            dataset属性指向的是一个DOMStringMap对象,这个对象采用键值对的形式存在自定义属性,对所有程序员对某个元素自定义的属性进行管理。

    <div id="box" data-kawayi="kawayi" data-cxk="cxk">

            然后,使用元素节点对象的dataset属性,它指向一个对象,可以用来操作HTML元素标签的data-*属性。

    1. var dataSetObj = document.getElementById('box').dataset;//用dataSetObj来绑定id为box的元素的所有自定义属性
    2. dataSetObj.kawayi;//获得之前设置的data*属性
    3. dataSetObj.cxk
    4. dataSetObj.kawayi ='niubility';//修改之前的data*属性
  • 相关阅读:
    如何用 GPTs 帮你写科研项目申请书?
    Java 字符串工具类
    linux之进程管理命令
    华为---- RIP路由协议基本配置
    威班11月份PMP模拟考试实录
    MySQL的基本操作(超详细)
    《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解
    Redis集群服务器
    用Python把附近的足浴店都给采集了一遍,好兄弟:针不戳~
    Opencv_14_多边形填充与绘制
  • 原文地址:https://blog.csdn.net/weixin_44992737/article/details/125296017