关于dom:DOM操作

39次阅读

共计 1656 个字符,预计需要花费 5 分钟才能阅读完成。

  1. JS 基础知识,规定语法(ECMA 262 规范)
  2. JS Web API,网页操作的 API(W3C 规范)
JS Web API:
  • DOM
  • BOM
  • 事件绑定
  • ajax
  • 存储
DOM(document object model)的实质

获取 DOM 节点

//html 和 css
//css
.container{
    border:1px solid #ccc;
    height:50px;
}
.red{color:red;}
//html
<div id="div1">
    <p> 这是一段文字 1 </p>
    <p> 这是一段文字 2 </p>
    <p> 这是一段文字 3 </p>
<div>
<div class="container">
    内容
</div>
const div1 = document.getElementById('div1');// 元素
const divList = doucument.getElementsByTagName('div')// 汇合
console.log(divList.length,divList[0])
const containerList = doucument.getElelmentsByClassName("container") // 汇合
const pList = document.querySelectorAll("p") // 汇合 

property 和 attribute

  1. property: 批改对象属性,不会体现在 html 构造中。
  2. attribute: 批改 html 属性,会扭转 html 构造。
  3. 两者都可能引起 DOM 从新渲染。(尽量用 property)

js

const pList = doucument.querySelectorAll('p')
const p1 = pList[0]

property 模式 (对 dom 元素 js 变量进行批改)

p1.style.width="100px"
console.log(p1.style.width)
p1.calssName = "red"
console.log(p1.calssName)
console.log(p1.nodeName)// 打印的是节点名称 p
console.log(p1.nodeType)// 打印节点类型 1 

attribute 模式 (设置的是节点属性)

p1.setAttribute("class","container")
console.log(p1.getAttribute("class"))

DOM 构造操作

  1. 新增 / 插入节点
  2. 获取子元素列表,获取父元素
  3. 删除字节点
const div1 = document.getElementById("div1")
// 增加新节点
const newP = document.createElement('p')
newP.innerHTML = "this is p1"
div1.appendChild(newP)// 增加新创建的元素
// 挪动已有节点,留神是挪动
const p2 = document.getElementById('p2')
div1.appendChild(p2)

// 获取子元素列表
const div1 = doucument.getElementById("div1")
const div1ChildNodes = div1.childNodes
console.log(div1.childNodes)// 打印出两种标签,一种是 p 标签,一种是 text 标签,因为 p 标签外面含有文本,text 的 nodeType 为 3,p 的 nodeType 为 1,所以通过转化为数组过滤。const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child=>{if(child.nodeType == 1){return true}
    return false
})

// 删除子节点
div1.removeChild(div1ChildNodesP[0])


// 获取父元素
const div1 = document.getElementById("div1")
const parent = div1.parentNode

正文完
 0