JS 之 Bom/Dom/节点

一、什么是BOM?

浏览器对象模型

二、BOM中的顶级对象是什么?

window

三、window下有哪些子对象?

document location history navigator frames screen

四、如何实现跳转页面?

window.location

location.href

五、如何刷新页面?

location.reload([true])

history.go(0)

六、window下方法

1. alert() : 警告框

2. confirm() : 选择框

3. prompt() : 提示输入框

4. open() : 打开一个新窗口

5. close() : 关闭当前窗口

七、计时器(延时器、定时器)

间歇性计时器: setInterval(函数,毫秒数) clearInterval()

一次性计时器: setTimeout(函数,毫秒数) clearTimeout()

八、什么是DOM?

文档对象模型

九、如何获取页面元素对象?

1. document.getElementById() 返回对象,失败,返回null

2. document.getElementsByTagName() 返回伪数组

3. document.getElementsByClassName() 返回伪数组,IE9以下不兼容

function byClassName(obj,className){

if(obj.getElementsByClassName){

return obj.getElementsByClassName(className);

}else{

var arr = [];

var eles = obj.getElementsByTagName(‘*‘);

for(var i = 0,len = eles.length;i < len;i ++){

if(eles[i].className === className){

arr.push(eles[i]);

}

}

return arr;

}

}

4. document.getElementsByName()

5. document.querySelector() //IE8以下不兼容 返回对象

6. document.querySelectorAll() //IE8以下不兼容

7. document.documentElement //html

8. document.body //body

十、如何创建节点对象?

1. 元素节点对象: document.createElement()

2. 文本节点对象: document.createTextNode()

3. 文档碎片: document.createDocumentFragment()

十一、 如何修改节点对象

父节点.replaceChild(new,old)

十二、如何删除节点对象?

1. 父节点.removeChild(子节点)

2. 节点.remove()

十三、如何克隆节点对象?

节点.cloneNode([true])

十四、如何追加子节点?

父节点.appendChild(子节点)

十五、常见节点及节点属性

nodeName nodeType nodeValue

元素节点: 元素名 1 null

属性节点: 属性名 2 属性值

文本节点: #text 3 文本内容

十六、滚动事件

onscroll

//垂直

document.documentElement.scrollTop || document.body.scrollTop

//水平

document.documentElement.scrollLeft || document.body.scrollLeft

原文地址:https://www.cnblogs.com/pppoe/p/10389407.html

时间: 2024-08-29 16:08:02

JS 之 Bom/Dom/节点的相关文章

JS/jQuery判断DOM节点是否存在

JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

通过js添加的DOM节点的click事件绑定不上的解决方案以及IOS下click事件委派失效的解决方案

问题描述: 如以下代码所示,通过js添加的Dom节点,在其上绑定点击事件,有的时候会出现点击事件不响应的情况,按照正常的理解,js代码具有阻塞性,Dom节点添加成功之后,就可以找到该节点并绑定事件,没有道理会出现事件绑定不上的问题,但是这种情况的确是遇到了多次,问题原因有待日后深入理解,下面记载一下问题的解决方案. 解决方案: 方案一:将事件绑定直接写在行内标签上"<thead onclick='myFunction(this)' >",其中,this代表的是当前元素,是一

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

js中的dom节点以及offset,client,scroll家族

一.节点. 1.父节点:parentNode; 2.兄弟节点: (1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling); (2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling); 3.子节点: (1).选中第一个子节点:firstElementChild(在Ie中用firstChild); (2).选中最后一个子节点:lastElementChild(在ie中用lastChild); (3).选

JS中的DOM— —节点以及操作

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图

js中的DOM节点

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法. DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 把上面的代码拆分为Dom节点图  如图: 三种常见的DOM节点: 1.元素节点: 比如:html.h2.p.ul.li   即标签 2.文本节点:向用户展示的内容,比如:<li></li>中的JavaScript.DOM.CSS等文本 3.属性节点:元素属性  比如:<a></a>标签中

js获取HTML DOM节点元素方法总结

1. 通过顶层document节点获取:    (1)document.getElementById(elementId) :通过ID获得节点,如果页面上含有多个相同id的节点,那么只返回第一个节点.   (2)document.getElementsByName(elementName) :通过name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组.然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点.            例如:在HTML中

动态操作DOM节点js实现

    近日再次翻看<javascript面向对象编程指南>这本书,读到浏览器环境一章,渐渐明白了js作为脚本语言,需要依托宿主环境来实现功能,从浏览器角度考虑,就是对浏览器的BOM和DOM的操作.DOM操作又可分为:访问.修改.删除.新建.每种操作都有独特的方法和属性.下面取dom节点的访问.新建和删除的功能实例来讲解(参考文章).     <INPUT LEFT: 392px; POSITION: absolute; TOP: 128px" type="butto

JavaScript基础及函数,BOM,DOM的节点及DOM节点操作

使用js的三种方式 1.直接在HTML标签中,使用事件属性,调用js代码: <button onclick="alert('点我呀')">点我啊!<tton> 2.在页面的任意位置,使用script标签 <script type="text/javascript"> alert('哈哈哈') </script> 3.外部:使用script标签 src属性选择外部地址, type属性选择"text/javasc