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