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

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