DOM知识点详解

w3c标准：万维网联盟制定的一套标准

HTML DOM：如何使用js获取、更改、添加、删除HTML元素的标准

• 更改HMTL元素对象的属性值
• 添加、删除HTML元素对象

获取HMTL元素

document.getElementById(id)

document.getElementsByTagName(name)

document.getElementsByClassName(name)

document.querySelectorAll(css选择器) 通过css选择器查找

HTML对象选择器获取元素：

document.anchors
document.body
document.documentElement // hmtl标签
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title

修改属性值

element.innerHTML = ‘文本’ 标签中插入文本或HTML字符串

element.attribute = value

element.setAttribute(attribute,value)

element.style.property = value 更改style属性的样式值

操作节点方法

document.createElement(element)

parentNode.removeChild(element)

parentNode.appendChild(element)

parentNode.insertBefore(要插入的节点,在哪个子节点前插入)

element.remove()

parentNode.replaceChild(newChildEle,oldChildEle)

document.write(‘文本’) 在body标签中最后部位添加一个文本字符串

elememt.onclick = function() {方法体}

const p1 = document.createElement('p')
p1.innerText = '再见'

const body = document.querySelector('body')
body.appendChild(p1)
body.replaceChild(p1, p0)
p1.onclick = function () {
      alert('hahaah')
    }

document.write('哈哈哈')

console.log(document.anchors) // 具有name属性的a标签
console.log(document.applets) // applet标签
console.log(document.baseURI) // http://127.0.0.1:5500/1.html
console.log(document.body) // body标签
console.log(document.cookie) // 浏览器中cookie
console.log(document.doctype) // html
console.log(document.documentElement) // html标签元素
console.log(document.documentURI) // http://127.0.0.1:5500/1.html
console.log(document.documentMode) // undefined
console.log(document.domain) // 返回域名 127.0.0.1
console.log(document.domconfig) // undefined
console.log(document.embeds) // 返回embed元素
console.log(document.forms) // form元素
console.log(document.head) // head标签
console.log(document.images) // img元素
console.log(document.implementation) // dom实现
console.log(document.inputEncoding) // UTF-8
console.log(document.lastModified) // 最终更新时间
console.log(document.links) // 拥有href属性的a标签
console.log(document.readyState) // loading 文档加载状态
console.log(document.referrer) // http://127.0.0.1:5500/1.html
console.log(document.scripts) // script标签
console.log(document.strictErrorChecking) // undefined
console.log(document.title) // title文本
console.log(document.URL)// http://127.0.0.1:5500/1.html

表单验证

添加form标签属性自动验证：

disabled：禁用input元素

max：input的value最大值

min：input的value最小值

pattern：input的value必须符合的模式

required：必填

type：input标签类型

css伪类选择器获取有表单验证约束的input元素：

:disabled 有disabled属性的input

:invalid 有无效值的input

:optional 未规定required属性的input

:required 规定了required的input

:valid 具有有效值的input

动画

结合settimeout和setinterval操作html元素

事件

1、使用js获取元素对象后分配事件；2、直接在html元素标签上绑定事件；

3、事件监听绑定事件；

<button onclick="displayDate()">试一试</button>

<script>
document.getElementById("myBtn").onclick = displayDate;
</script> 

element.addEventListener("click", function(){ alert("Hello World!"); });
element.removeEventListener("mousemove", myFunction);

冒泡：从内标签到外标签依次触发事件

捕获：从外标签到内标签依次触发事件

addEventListener(event, function, useCapture);
// useCapture为true时捕获模式，为false时冒泡模式

节点导航

parentNode

childNodes[nodeIndex]

firstChild

lastChild

nextSibling

previousSibling

nodeName:

只读属性

元素节点 标签名

属性节点 属性名

文本节点 #text

文档节点 #document

nodeValue

元素节点 undefined

文本节点 文本

属性节点 属性值

nodeType

普通html元素节点 1

属性节点 2

文本节点 3

注释 8

html 9

document 10

HMTLColllection

document.getElementByTagName() 返回HTMLColection集合

HTMLCollection.length

HTMLCollection[index]

可以遍历HTMLCollection，但不是数组，不能对其使用数组方法

NodeList

document.querySelectorAll() 返回NodeList对象

NodeList[index]

NodeList.length

可以通过for循环遍历

可以通过名称、id或索引访问HTMLCollection项目，只能通过索引访问NodeList项目

只有NodeList可以包含属性节点和文本节点