2022-08-03_JS06_DOM相关

什么是DOM?

字面意思 DOM是Document  Object Model(文档对象模型)的缩写

个人理解 DOM里面的内容就是其对应的HTML文档,DOM与HTML文档是相通的,哪一方发生改变另一方都会发生改变。一个完整的页面是由HTML、CSS、JS三种语言共同组成的,其中JS提供网页与用户之间的交互,是控制网页的行为的。而这个控制HTML文档的对象就是DOM。

DOM的相关注意事项

getElementById()中Element没有s,而其他如getElementsByName()、getElementsByTagName()等表示复数的方法都是Elements

注意单词的拼写,如Id的I为大写

node 节点 HTML中的所有内容都可称之为节点

getElementsById这种获取一类节点或元素的方法,返回的内容都是通过伪数组(HTMLCollection)的方式存储的

HTMLCollection   html集合 元素以对象的方式存放其中 即使数量为1或0,也是以伪数组的方式存放

H5新增选择元素的方法

querySelectory()

在使用querySelectory()时,如果要选择类选择器,要加 .  要选择id选择器要加 # ......  其返回的时第一个元素对象

querySelectoryAll()  返回选择的所有元素

getElementsByClassName()  通过类名选择元素

以上同样将返回值以伪数组的方式储存

获取HTML和Body标签

body: var body=document.body

HTML: var htmlele=document.documentElement

innerHTML与innerText的异同点

同  二者均支持读写操作,都可以获取元素内的内容或改变元素内的内容

异  1.innerHTML读的时候能识别HTML标签、空格、换行。写的时候能识别HTML标签

      2.innerText读的时候不能识别HTML标签、空格、换行。写的时候也不能识别HTML标签,会把标签当作文本          处理

注意:   innerHTML与innerText只能操作普通的标签 如div p 表标签等。如表单元素里的内容需要通过value进行操作

焦点事件(鼠标的焦点如光标)

onfocus  获得焦点

onblur     失去焦点

在JS里更改元素的样式的方法

1.以  element.style.xxx的方式直接添加样式  当样式较少时可以使用

2.创建CSS样式后取一个类名,在JS中创建事件,当事件发生时在将类名加入到元素中去。这时候不是

element.class而是element.className(class在JS中是保留字)  但是这样写会直接替换元素的Class类名

如果需要保留就要改成多类名的方式  element.className="old new"

获取 和 设置 元素属性的方法

获取

element.属性    一般用来获取元素的内置属性

element.getAttribute("属性")    一般用来获取自定义的属性

设置元素属性值

element.属性="属性值"

element.setAttribute("属性","属性值")  这个属性值如果是设置成数字,那么引号可加可不加,如果是字符就必须加  setAttribute既可以修改元素自带属性又可以修改自定义属性

移除属性

element.removeAttribute ("属性")  移除element中选定的属性

自定义属性

H5自定义属性规范,所有的自定义属性都以  data-  开头

例如:  < div data-index="1" ></div>

获取自定义属性的方法

1.element.getAttribute("属性名")  兼容性好

2.element.dataseat.index  不兼容IE11以下

例如:

<body>

    <div data-index="1"></div>

    <div data-index-number="2"></div>

    <div data-index1="a" data-index2="b"></div>

</body>

</html>

<script>

    var div=document.querySelectorAll("div")

    console.log(div[0].dataset.index);

    console.log(div[1].dataset.indexNumber); //如果自定义属性名data后有多个字符,dataset.后面就要使用                                                                          驼峰命名法获取

     console.log(div[2].dataset);  //如果一个元素内有多个自定义属性,呢么他们是被存放在一个伪数组里面                                                      的,打印其dataset得到 {index1: 'a', index2: 'b'}

</script>

在链接a标签href属性内写  javascript:;可组织链接跳转

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容