前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递

HTML DOM简介和新特性

1,HTML DOM简介

核心DOM中,提供的属性和方法,已经可以操作网页了,为什么还要HTML DOM?
如果在核心DOM中,网页中节点层级很深时,访问这个节点时将十分的麻烦。因此使用HTML DOM中提供的通过id直接找节点的方法,而不用再从HTML根节点开始。

2,每一个HTML标记,都对应一个元素对象,如:对应一个图片对象;对应一个表格对象,等等

前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递_第1张图片

HTML DOM访问HTML元素的方法(频繁使用)

1,getElementById(id);

功能:查找网页中指定id的元素对象;
语法:var obj =document.getElementById(“id”);
参数:id是指网页中标记的id属性的值;
返回值:返回一个元素对象
例:var imgObj =document.getElementById(“img”);

2,getElementsByTagName(tagName)

功能:查找指定的HTML标记,返回一个数组。
语法:var arrObj =parentNode.getElementsByTagName(tagName);
参数:tagName是要查找的标记名称,不带尖括号;
返回值:返回一个数组,如果只有一个节点也返回一个数组;
例:找到ulTag下的所有li标记
前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递_第2张图片

元素对象的属性(标准属性)

前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递_第3张图片

1,tagName :标签名称,与核心DOM中的nodeName一样;

2,className :CSS类的样式;效果相当于HTML标记中加入class =“className”

3,id :同HTML标记id属性一样;
4,title :同HTML标记的title属性一样;
5,style :同HTML标记的style属性一样;

6,innerHTML :指包含在HTML标记中所有的内容,包括其中的HTML标记;

7,offsetWidth :元素对象的宽度,不带px单位;
8,offsetHeight :元素对象的高度,不带px单位;
9,scrollWidth :元素对象的总宽度,包括滚动条中的内容,不带px单位;
10,scrollHeight :元素对象的总高度,包括滚动条中的内容,不带px单位;
11,scrollTop :元素对象向上滚动过去了多少距离(有滚动条时才有效),不带px单位;
12,scrollLeft :元素对象向左滚动过去了多少距离(有滚动条时才有效),不带px单位;
例:
前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递_第4张图片

onscroll事件(属性) :当拖动滚动条时,调用JS函数

实例:书讯快递

前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递_第5张图片





    
    
    JS实例:书讯快递滚动效果
    
    



    
"dome">
"dome1">
  • 走到今日并非理所当然
  • 顽风尚然强劲不挠
  • 确实之物比想象中的
  • 不要少吧
  • 是因为记忆被岁月模糊了吗
  • 还是说心灵被未曾见过的陌生人所烦扰了呢?
  • 其实是支配躯体的疼痛啊
  • 即使这样还是来到了这里
  • 心无旁骛地瞻望终点就好
  • 仅此唯一的理由
  • 便是得以撒入回归之土
  • 但那浅淡微薄的梦想
  • 如能秉持初心不曾改变
  • 未来也就不会无聊了吧......
"dome2">

显示效果如下:
前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递_第6张图片
前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递_第7张图片

@沉木