标签：总结 console log classList document 节点 div1 属性
-
attrbute
-
nodeName
- 定义：nodeName属性返回节点的名称
- 使用
console.log(div1.nodeName)
-
nodeValue
- 定义：nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值.
- 使用
console.log(div1.childNodes[1].nodeValue)
-
textContent
- 定义：textContent属性返回当前节点和它的所有后代节点的文本内容
- 使用
console.log(div1.textContent)
-
nextSibling
- 定义：nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null
- 使用
console.log(div1.firstChild.nextSibling)
-
previousSibling
- 定义：previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null
- 使用
console.log(div1.lastChild.previousSibling)
-
parentNode
- 定义：parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点(element)、文档节点(document)和文档片段节点(documentfragment)
- 使用
console.log(div1.parentNode)
-
parentElement
- 定义：parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null
- 使用
console.log(div1.parentElement)
-
firstChild和lastChild
- 定义：firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。
- 使用
console.log("div1.firstChild:",div1.firstChild)
console.log("div1.lastChild:",div1.lastChild)
-
childNodes
- 定义：childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点
- 使用
console.log("div1.childNodes:",div1.childNodes)
-
classList
- 定义:返回该元素包含的 class 属性的集合。
- 使用
console.log("div1.classList:",div1.classList)
-
console.log("div1.classList:",div1.classList)
-
className
- 定义:获取或设置指定元素的 class 属性的值。
- 使用
div1.classList.add('class1')
div1.classList.add('class2')
console.log(div1.className)
-
clientHeight
- 定义:获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
- 使用
console.log("div1.clientHeight:",div1.clientHeight)
console.log("div1.clientWidth:",div1.clientWidth)
console.log("div1.clientLeft:",div1.clientLeft)
console.log("div1.clientTop:",div1.clientTop)
-
clientTop
- 定义:返回该元素距离它上边界的高度。
- 使用
-
clientLeft
- 定义:返回该元素距离它左边界的宽度。
- 使用
-
clientWidth
- 定义:返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
- 使用
-
tagName
- 定义:返回当前元素的标签名。
- 使用
console.log(div1.tagName)
-
body
- 定义:直接指向<body>元素
- 使用
console.log(document.body)
-
title
- 定义:获取文档的标题
- 使用
console.log(document.title)
-
URL
- 定义:取得完整的URL
- 使用
console.log(document.URL)
-
-
domain
- 定义:取得域名，并且可以进行设置，在跨域访问中经常会用到。
- 使用
console.log(document.domain)
-
referrer
- 定义:取得链接到当前页面的那个页面的URL，即来源页面的URL。
- 使用
console.log(document.referrer)
-
images
- 定义:获取所有的img对象，返回HTMLCollection类数组对象
- 使用
console.log(document.images)
-
forms
- 定义:获取所有的form对象，返回HTMLCollection类数组对象
- 使用
console.log(document.forms)
-
links
- 定义:获取文档中所有带href属性的<a>元素
- 使用
console.log(document.links)
-
innerHTML
- 定义:设置或获取 HTML 语法表示的元素的后代。
- 使用
div1.innerHTML = '创建一个div'
-
attribute
- 定义:修改属性的值
- 使用
-
element.style.property = new Style
- 定义:改变 HTML 元素的样式
- 使用
div1.style.border = 'solid 1px black'
-
attributes
- 定义:返回一个与该元素相关的所有属性的集合
- 使用
console.log(div1.attributes)
-
function
-
appendChild
- 定义：在 childNodes 列表末尾添加节点
- 使用
document.body.appendChild(div1)
-
insertBefore
- 定义：将某个节点插入父节点内部的指定位置。
- 使用
document.body.insertBefore(p1,div1) //第一个参数是新添加的元素,第二个是在这个元素前插入
-
insertAdjacentHTML
- 定义:insertAdjacentHTML() 方法是将文本解析为 element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。
- 使用
div1.insertAdjacentElement('beforebegin',p2) //第一个参数是位置 第二个参数是新插入的元素
div1.insertAdjacentElement('afterbegin',p3)
div1.insertAdjacentElement('beforeend',p4)
div1.insertAdjacentElement('afterend',p5)
-
removeChild
- 定义：removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
- 使用
div1.removeChild(p4)
-
replaceChild
- 定义：将一个新的节点，替换当前节点的某一个子节点。
- 使用
div1.replaceChild(p7,p6) //第一个参数是用于替换的,第二个是被替换的
-
cloneNode
- 定义：返回调用该方法的节点的一个副本，如果为true，则采用深度克隆,,该节点的所有后代节点都会被克隆,如果为false,则只克隆该节点本身。
- 使用
let p6 = p5.cloneNode('deep')
-
getElemenById
- 定义：使用元素的 id获取HTML元素
- 使用
console.log(document.getElementById('p6'))
-
getElementsByTagName
- 定义：通过标签名来查找元素
- 使用
console.log(document.getElementsByTagName('div'))
-
getElementsByClassName
- 定义：通过类名来查找元素
- 使用
console.log(document.getElementsByClassName('p6class'))
-
querySelector
- 定义：返回文档中匹配指定的CSS选择器的第一元素
- 使用
console.log(document.querySelector('#p6'))
-
querySelectorAll
- 定义：document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
- 使用
console.log(document.querySelectorAll('.p6class'))
-
element.getAttribute(key)
- 定义:返回元素节点的指定属性值。
- 使用
console.log(p6.getAttribute('id'))
-
element.setAttribute(key,value)
- 定义:设置或改变 HTML 元素的属性值
- 使用
console.log(p6.getAttribute('id'))
p6.setAttribute('id','p6new')
console.log(p6.getAttribute('id'))
-
createElement
- 定义：创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
- 使用
let div1 = document.createElement('div')
-
write
- 定义:向文档写入文本或 HTML 表达式 或 JavaScript 代码。
- 使用
document.write(str)
-
classList.funtction
- add():删除元素的一个或多个类名;
- remove():向元素添加一个或多个类名;
- toggle():元素切换类,将它放在点击事件中若检测到没有的类就添加，若检测到有c的类就删除
-
console.log("div1.classList:",div1.classList)
div1.classList.add('class1')
div1.classList.add('class2')
console.log("div1.classList:",div1.classList)
div1.classList.remove('class2')
console.log("div1.classList:",div1.classList)
div1.classList.toggle('class1')
console.log("div1.classList:",div1.classList)
-
PS:部分代码
let div1 = document.createElement('div')
div1.innerHTML = '创建一个div1'
document.body.appendChild(div1)
let p1 = document.createElement('p')
p1.innerHTML = '创建一个p1'
document.body.insertBefore(p1,div1) //第一个参数是新添加的元素,第二个是在这个元素前插入
let p2 = document.createElement('p')
p2.innerHTML = '创建一个p2'
let p3 = document.createElement('p')
p3.innerHTML = '创建一个p3'
let p4 = document.createElement('p')
p4.innerHTML = '创建一个p4'
let p5 = document.createElement('p')
p5.innerHTML = '创建一个p5'
div1.insertAdjacentElement('beforebegin',p2)
div1.insertAdjacentElement('afterbegin',p3)
div1.insertAdjacentElement('beforeend',p4)
div1.insertAdjacentElement('afterend',p5)
div1.style.border = 'solid 1px black'
div1.removeChild(p4)
let p6 = p5.cloneNode('deep')
div1.appendChild(p6)
p6.id = 'p6'
p6.className = 'p6class'
p6.setAttribute('id','p6new')
let p7 = document.createElement('p')
p7.innerHTML = '创建一个p7'
div1.replaceChild(p7,p6) //第一个参数是用于替换的,第二个是被替换的
// console.log(div1.nodeName)
// console.log(div1.textContent)
// console.log(div1.firstChild.nextSibling)
// console.log(div1.parentNode)
// console.log(div1.parentElement)
// console.log("div1.firstChild:",div1.firstChild)
// console.log("div1.lastChild:",div1.lastChild)
// console.log("div1.childNodes:",div1.childNodes)
// console.log("div1.classList:",div1.classList)
// div1.classList.add('class1')
// div1.classList.add('class2')
// console.log("div1.classList:",div1.classList)
// div1.classList.remove('class2')
// console.log("div1.classList:",div1.classList)
// div1.classList.toggle('class1')
// console.log("div1.classList:",div1.classList)
// console.log(div1.className)
// console.log("div1.clientHeight:",div1.clientHeight)
// console.log("div1.clientWidth:",div1.clientWidth)
// console.log("div1.clientLeft:",div1.clientLeft)
// console.log("div1.clientTop:",div1.clientTop)
console.log(div1.tagName)
标签：总结,
console,
log,
classList,
document,
节点,
div1,
属性
From： https://blog.csdn.net/g841805/article/details/137556477