Mysql索引结构

JavaScript(JS) 对象(Object)简介

  返回  

DOM编程操作

2021/7/21 7:06:28 浏览:

DOM:

JS用document操作网页 Document Object Model 文档对象模型

获取元素,也叫标签:

      有很多API:

window.idxxx或者直接 idxxx

document.getElementById('idxxx')                             IE

document.getElementsByTagName('div')[0]                IE

document.getElementsByClassName('red')[0]              IE

document.querySelector('#idxxx')                              新的

document.querySelectorAll('.red')[0]                           新的


获取特定的元素:

获取HTML元素:document.documentElement

获取head元素:document.head

获取body元素:document.body

获取窗口(窗口不是元素):window

获取所有元素:document.all

document.all不是对象,是一个数组,存在的话是IE浏览器,不存在的是其他浏览器。


看div的结构:

console.dir( )


节点node包括以下几种:

1表示元素Element,也叫标签Tag

3表示文本Text

8表示注释Comment

9表示文档Document

11表示文本片段DocumentFragment


节点的增删改查:

增:

创建一个标签节点:

let div1 = document.createElement('div')

document.creatElement('style')

document.creatElement('script')

document.creatElement('li')

创建一个文本节点:

text1 = document.createTextNode('你好')

标签里面插入文本:

div1.appendChild(text1) node提供的接口

div1.innerText='你好'或者div1.textContent = ‘你好’ Element提供的接口

但是不能用div1.appendchild('你好')

插入页面:

创建的标签默认处于JS线程中

必须把它查到head或者body里面,他才会生效

document.body.appendChild(div)

或者

已在页面中的元素.appendchild(div)

一个元素不能出现在两份,除非cloneNode 克隆节点


删:

旧方法:parentNode.childChild(childNode) IE

新方法:childNode.remove() 不兼容IE

两种方法并不完全删除,只是移到内存里去了,完全删除将其赋值为null


改:

写标准属性:

改class:div.className = 'red blue' ( 把之前的全覆盖 )

div.classList.add('red')                 (新的,不会覆盖)

改style:div.style = 'width:100px; color:biue;'

改style一小部分:div.style.width:'200px'

大小写:div.style.backgroundColor = 'white'

改data- * 属性:div.dataset.x = 'frank'

读标准属性:

div.classList/a/href

div.getAttribute('class')/a.getAttribute('href')

改事件处理函数:

div.onclick默认为null

默认点击div不会有任何事情发生

但是如果你把div.onclick改为一个函数fn

那么当你点击div的时候,浏览器会调用这个函数

并且是这样调用的fn.call(div,event)

此时div会被当做this

event则包含了点击事件的所有信息,如坐标等

改文本:

div.innerText = ' xxxx' 或者 div.textContent = 'xxxx'

改HTML内容:

div.innerHTML = '<strong>重要内容</strong>'

改标签:

div.innerHTML = " //先清空

div.appendChild(div2) //再加内容


查:

查爸爸:

node.parentNode 或者 node.parentElement

查爷爷:

node.parentNode.parentNode

查子代:

node.childNodes 或者 node.children     前者node会包含空格    后者不会

查兄弟姐妹:

node.parentNode.childNodes                还要排除自己

node.parentNode.children            还有排除自己

查看老大:

node.firstChild

查看老幺:

node.lastChild

查看上一个哥哥:

node.previousSibling

查看下一个弟弟:

node.nextsibling

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号