JavaScript-DOM总结
2021/8/4 14:06:36
本文主要是介绍JavaScript-DOM总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
JavaScript-DOM总结
- JavaScript-DOM总结
- 获取元素
- 获取&修改属性
- BOM
- 标记
.
JavaScript-DOM总结
获取元素
class属性:.
id属性:#
getElementById
:通过ID获取,返回对象,可直接操作。
getElementsByTagName
:通过标签名获取,返回对象数组,需遍历。
document.getElementsByTagName("li"); document.getElementsByTagName("li").length;
getElementsByClassName
:通过类名访问,返回对象数组,需遍历,如要访问多个类名需加空格。
document. getElementsByClassName("sale"); document. getElementsByClassName("important sale");
遍历对象数组建议采用:for循环
for(let i=0; i<t.length; i++){ console.log(t[i]); }
querySelector
:匹配CSS选择器的第一个元素
document.querySelector(`[name="username"]`); // 获取name属性为username的元素 document.querySelector("a[target]"); // 获取文档中有 "target" 属性的第一个 <a> 元素:
获取&修改属性
attribute
:属性名。
getAttribute(attribute)
:获取属性值
setAttribute(attribute, value)
:修改属性值
parentNode
:获取父元素
element.childNodes
:获取该元素的所有子元素数组,返回节点集合NodeList
document.getElementsByTagName("body")[0].childNodes
node.nodeValue
:设置节点值
设置节点值,必须是节点!
var c=document.getElementsByTagName("BUTTON")[0]; var x=document.getElementById("demo"); x.innerHTML=c.childNodes[0].nodeValue;
firstChild与lastChild
:查看第一个和最后一个节点孩子
element.style.属性名
:获取样式
getComputedStyle(element,null)
:获取当前生效的属性
这是一个window方法,有2个参数
- 第一个,需要获取样式的元素
- 第二个,可以传递一个伪元素
clientWidth
&clientHeight
:获取可见宽度和高度,不带px
offsetWidth
&offsetHeight
:获取元素的整个的宽度和高度,包括内容区、内边距和边框
scrollWidth
&scrollHeight
:获取元素整个滚动区域的宽度和高度
scrollLeft
&scrollTop
:可以获取水平和垂直滚动条滚动的距离
如果scrollHeight
减scrollTop
等于clientHeight
就表示滚动条到底了
如果想做拖拽效果,需要加上滚动条的宽度和高度
onmousemove
:事件会在鼠标移动时触发
onmousedown
:鼠标按下
onmouseup
:鼠标松开
clientX
&clientY
:获取鼠标指针的水平和垂直坐标
pageX
&pageY
:获取鼠标相对于当前页面的坐标
onkeydown
:键盘按下事件
event.keyCode
:键盘按键
event.wheelDelta
:滚轮长度
BOM
使用window
对象的open()
方法来创建新的浏览器窗口
window.open(url, name, features)
- url,网页URL的地址
- name,新窗口的名字,可以通过该名字与新窗口进行通信
- features,以逗号分隔的字符串,包含新窗口的各种属性:尺寸、工具条、菜单条、初始显示位置,等。
<a href="#" onclick="popUp('https://www.baidu.com/'); return false;">使用onclick:打开新窗口并跳转到百度</a> <script type="text/javascript" src="javascript/popUp.javascript"></script>
function popUp(winURL) { window.open(winURL, "popup", "window = 320, height = 480") }
如果有些用户禁用的javascript那么这种办法就不太妥当,所以我们可以用另外一个办法
<a href="https://www.baidu.com/" onclick="popUp(this.getAttribute('href')); return false;">使用onclick:打开新窗口并跳转到百度</a> <a href="https://www.baidu.com/" onclick="popUp(this.href); return false;">使用onclick:打开新窗口并跳转到百度</a>
javacript:
伪协议
伪协议:让我们通过连接调用javascript函数
<a href="javascript:popUp('https://www.baidu.com/')">使用伪协议:打开新窗口并跳转到百度</a>
confirm
:带选择提示框
prompt
:带输入框的提示框
Navigator
:代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
Location
:代表当前浏览器的地址栏信息
History
:代表浏览器的历史记录
Screen
:用户的屏幕的信息
setInterval(回调函数, 时间)
:定时调用,一直调用。
setTimeout
:不会立刻调用,只会调用一次。
clearInterval()
:关闭定时器
标记
document.write()
:打印文本
document.write("<p>This is inserted</p>")
innerHTML
:和write差不多,下面输出结果是相同的。
console.log(testdiv.innerHTML); testdiv.innerHTML = "<p>This is <em>emem</em> content.</p>"
document.createElement(nodeName)
:创建元素
parent.appendChild(child)
:插入节点树
document.createTextNode(text)
:给节点添加文本数据
// 第一步:创建节点 let child = document.createElement("p") // 第二步:获取节点树 let parent = document.getElementById("testdiv") // 第三步:创建文本数据 let txt = document.createTextNode("Hello world") // 第四步:给节点追加文本数据 child.appendChild(txt) // 第五步:将节点插入 parent.appendChild(child)
parentElement.insertBefore(newElement, targetElement)
:在一个现有元素前插入一个新元素
- 父元素:目标元素的父元素(
parentElement
) - 新元素:你想插入的元素(
newElement
) - 目标元素:将新元素插入到哪个元素(
targetElement
)前
这篇关于JavaScript-DOM总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-27本地多文件上传的简单教程
- 2024-11-27低代码开发:初学者的简单教程
- 2024-11-27如何轻松掌握拖动排序功能
- 2024-11-27JWT入门教程:从零开始理解与实现
- 2024-11-27安能物流 All in TiDB 背后的故事与成果
- 2024-11-27低代码开发入门教程:轻松上手指南
- 2024-11-27如何轻松入门低代码应用开发
- 2024-11-27ESLint开发入门教程:从零开始使用ESLint
- 2024-11-27Npm 发布和配置入门指南
- 2024-11-27低代码应用课程:新手入门指南