js的dom对象操作和（window|iframe）的重新理解

最新推荐文章于 2021-08-03 13:42:01 发布

社会刘

最新推荐文章于 2021-08-03 13:42:01 发布

阅读量426

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_37779709/article/details/78423146

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

js通过DOM技术，操作html标签内容的增删改查
文档节点：<html></html>的父节点,document
元素节点：html中所有标签，都是元素节点
1.document.getElementById(id属性值)，每次只返回一个元素节点对象
2.document.getElementByTagName（tag标签名称），每次返回一个集合列表对象，集合列表对象不能做具体操作，只有取到具体对象
列表对象[下标]，或者列表对象.item(下标);
3.firstChild,lastChild，子节点中的第一个和最后一个节点
4.nextSibling,previousSibling,兄弟节点的下一个节点和上一个节点
5.childNodes,所有子节点

6.以上firstChild，lastChild，nextSibling,previousSibling,childNodes,都会遇到空白节点，文本节点----------chlidren 可以获取所有子元素，不含空白节点的集合， nodeType 为1 就是元素节点

节点的创建
document.createElement（'tag标签名'）：创建元素节点
document.createTextNode('string'):创建文本节点
元素节点.setAttribute('city','南宁'):给元素创建属性
元素节点A.appendChild(元素节点B):B作为子节点加在元素A最后面

复制节点
元素节点.cloneNode(true);

删除某个节点
父节点.removeChild(子节点)
子节点.parentNode.removeChild(子节点)

js事件操作

通过鼠标、键盘对浏览器页面所做的动作就是事件，事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任

onclick:鼠标点击

onmouseover:鼠标移入

onmouseout:鼠标移出

onkeyup：键盘按下并抬起，就是按键盘事件

onkeydown：键盘按下

onchange：内容改变

onblur：失去焦点

onfocus：获取焦点

onsubmit：表单提交

dom1级方式对事件的设置：

1.<input type="text" οnclick=" 函数名称()"/>

function 函数名称(){}

2.itnode.οnclick=function(){}

3.itnode.οnclick=null 取消事件

dom2级方式对事件的设置

itnode.addEventListener('click',function(){});

事件对象：每个事件（包括鼠标、键盘事件）触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标位置信息，通过事件也可以感知什么键子被触发执行，通过事件还可以阻止事件流，阻止浏览器默认的动作（如form表单提交后的action跳转就是默认事件）

获取事件对象很简单，function（evt）{}，无论是dom1还是dom2，都是在函数中传参就可以，这个参数默认就是事件对象

event.keyCode 获得键盘对应的键值码信息

阻止浏览器默认事件

dom1：var fm = document.getElementsByTagName('form')[0];

fm.οnsubmit=function(){

alert('邮箱格式不正确');

//阻止浏览器跳转

return false；

}

dom2：fm.addEventListener(function(evt){

alert('邮箱格式不正确');

//阻止浏览器跳转

evt.preventDefault();

})

window和iframe的新理解

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

一、在使用iframe的页面时，要操作这个iframe里面的DOM元素可以用：contentWindow、contentDocument

1、先获取iframe里面的window对象，再通过这个对象，获取到里面的DOM元素

例子：

var ifr = document.getElementById("iframe");
ifr.contentWindow.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

　　ifr.contentWindow 这里，返回的是iframe的window对象，所以后面可以接着调用document方法，再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

二、在iframe本页面，要操作这个iframe的父页面的DOM元素（即嵌套这个iframe的页面）可以用：

　　window.parent、window.top(这里的TOP是获取的顶层，即有多层嵌套iframe的时候使用)

var ifr = document.getElementByTagName("iframe");
ifr.parent.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

实例：

　　top.$("iframe[name='iframeWindow']")[0].contentWindow.$("#inside_tableElement")，这样才能获取到iframe里的元素，

社会刘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的dom对象操作和（window|iframe）的重新理解

js通过DOM技术，操作html标签内容的增删改查文档节点：&lt;html&gt;&lt;/html&gt;的父节点,document元素节点：html中所有标签，都是元素节点1.document.getElementById(id属性值)，每次只返回一个元素节点对象2.document.getElementByTagName（tag标签名称），每次返回一个集合列表对象，集合列表对象不能...
复制链接

扫一扫

专栏目录