D1.DOM-获取DOM元素、修改属性

DOM：DOM（Document Object Model）文档对象模型 是用来呈现以及与任意 HTML 或 XML文档交互的API

作用：1实现网页特效

2实现用户交互

DOM树：1将 HTML 文档以树状结构直观的表现出来

2作用：文档树直观的体现了标签与标签之间的关系

DOM对象：浏览器根据html标签生成的 JS对象

DOM的核心思想：把网页内容当做对象来处理

演示其他获取元素语法（了解）

通过id名来获取

documentgetElementById('box')

通过类名来获取

documentgetElementsByClassName('box')

通过标签名来获取

documentgetElementsByTagName('ul')

1innerText

2innerHTML

细节：innerText 与 innerHTML 设置内容的时候，会覆盖原有的内容

如何实现把原本的内容也带上？

1设置/修改元素常用属性（src 、title等属性）

语法：对象属性 = 值

2通过类名 *** 作CSS

注意说明：

1 在JS中使用className表示类名，因为class在js中是个关键字在标签上，class属性表示类名，但在js中使用className表示类名

2 使用className有 覆盖 问题

3通过style控制样式属性

语法：对象style样式属性名 = 值

通过style *** 作样式 本质上 设置行内样式

4表单的属性设置 （value、type、disabled、checked、selected）

语法

获取： 对象属性名

设置： 对象属性名 = 值

定时器函数

作用: 每隔一段时间，就会来调用函数

注意易错

如下写法，会将fn() 立即调用，就没有了定时效果

setInterval(fn(), 1000) // 错误效果

//html 

<div id="show">show</div>

//css;

#show {width: 100px;height: 100px; background: #ccc; display: none;}

//js file;

windowonload = function () {

//根据ID返回dom元素 

var $ = function(id){return documentgetElementById(id);} 

//返回dom元素的当前某css值 

var getCss = function(obj,name){ 

if(objcurrentStyle) {//for ie ;

return objcurrentStyle[name]; 

}else { // for ff;

var style = documentdefaultViewgetComputedStyle(obj,null); 

return style[name]; 

} 

} 

var show = function(obj,speed){ 

obj = $(obj); 

if (!speed) { 

objstyledisplay = 'block'; 

return; 

}

var initH = 0 , initW = 0;

//获取dom的宽与高 

var oWidth = getCss(obj,'width')replace('px',''), oHeight = getCss(obj,'height')replace('px',''); 

//每次dom的递减数(等比例) 

var wcut = 2(+oWidthreplace('px','') / +oHeightreplace('px','')),hcut = 2; 

//处理动画函数 

var process = function(){ 

        objstyleoverflow = 'hidden';

objstyledisplay = 'block';

initW = (initW+wcut) > oWidth  oWidth : initW+wcut; 

initH = (initH+hcut) > oHeight  oHeight : initH+hcut; 

//判断是否减完了 

if(initW !== oWidth || initH !== oHeight) { 

//objstylewidth = initW+'px'; 

objstyleheight = initH+'px'; 

setTimeout(function(){process();},speed); 

}else { 

//加完后，设置属性为显示以及原本dom的宽与高; 

//objstylewidth = oWidth+'px';

objstyleheight = oHeight+'px';

} 

} 

process(); 

} 

show("show",50);

}

最近做了一个项目，需要表格的高度跟着浏览器的高度变化，页面不会出现滚动条，并且分页器一直在浏览器的底部

表头的搜索框的高度可以伸缩，不是固定的，这就需要监听到搜索框的高度，用浏览器的高度减去搜索框的高度和分页器的高度就是表格的高度了

先自定义监听方法吧，如下：

现在组件内注册

directives方法跟data，methods方法是平级的

需要监听的组件绑定这个方法，这里是监听表头的高度

这时就已经监听到的表头的宽高变化了，就可以拿出来用了

以上就是关于D1.DOM-获取DOM元素、修改属性全部的内容，包括:D1.DOM-获取DOM元素、修改属性、用javascript控制div的显示从下方逐渐出现、vue使用自定义指令监听Dom元素宽高变化等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！