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:;可组织链接跳转

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容