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:可以获取水平和垂直滚动条滚动的距离

如果scrollHeightscrollTop等于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总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程