ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript-DOM总结

2021-08-04 14:01:56  阅读:174  来源: 互联网

标签:总结 元素 DOM JavaScript 获取 新窗口 document 节点 属性


JavaScript-DOM总结


.

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)前

标签:总结,元素,DOM,JavaScript,获取,新窗口,document,节点,属性
来源: https://blog.csdn.net/qq_31755699/article/details/119382525

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有