js DOM

1. 获取页面所有的 a 标签


2. 实现下面要求

在页面创建一个高宽为300像素*150像素的div元素,插入到<body>标签下


3. 已知如下 DOM结构,完成下面要求

<textarea></textarea>

(1) 获取 textarea 元素

(2) 设置 textarea 元素row属性值是5

(3) 取此时 textarea 元素的高度(不包括border)

(4) 由于不同浏览器的默认高度不一致,请设置此时 textarea 元素的高度值为当前 textarea 元素的行高计算值和 `row 属性值的乘积 ,保证浏览器的显示效果一致


(5) 实现下面要求代码

在实际开发中,我们可能会在页面插入包含文本域的HTML代码:<textarea row="8">row属性值不固定</textarea>此时,这些后插入的文本域在不同浏览器下高度不一样的问题还是存在,总不可能每一次插入后都执行上面的流程吧。请实现方法,在每次插入一段HTML,其中的文本域高度自动变成row属性值和行高的乘积

4. 已知如下 DOM结构,完成下面要求

li.selected { color: red; }

<input id="input">
<ul id="list">
    <1i>列表1</1i>
    <1i>列表2</1i>
    <1i>列表3</1i>
</u1>

(1) 点击1i列表元素,把里面文字内容赋给input输入框,同时使用类名 .selected 将当前内容高亮,一次只能高亮1个)



(2) 尝试使使用上下键控制列表的高亮并同时赋值给 input



5. 高亮选中

页面有一个输入框,在点击按钮后,将下面 HTML 内容内的文本内容进行高亮

提示,字符串的替换函数可以传入一个函数对获取的字符串进行处理

<article class="article"><div><div></div>

<div>&nbsp;</div>

<div><span style="line-height: 1.5;">本节提供了一个简单的概念性的DOM介绍:DOM是什么, 它是如何组织&nbsp;</span><a href="/en-US/docs/HTML" style="line-height: 1.5;" title="HTML">HTML</a><span style="line-height: 1.5;"> 及 </span><a href="/en-US/docs/XML" style="line-height: 1.5;" title="XML">XML</a><span style="line-height: 1.5;">&nbsp;文档,你要如何访问它,这个API提供了哪些参考信息和实例。&nbsp;</span></div>

<div>&nbsp;</div></div><h2 id="什么是_DOM"><a href="#什么是_DOM" title="Permalink to 什么是 DOM?">什么是 DOM?</a></h2><div><p>文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。</p>

<p>一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型(DOM)提供了对同一份文档的另一种表现,存储和操作的方式。 DOM是web页面的完全的面向对象表述,它能够使用如 JavaScript等脚本语言进行修改。</p>

<p>&nbsp;<a class="external" href="http://www.w3.org/DOM/">W3C DOM</a>&nbsp;和<a href="https://dom.spec.whatwg.org/">WHATWG DOM</a>标准在绝大多数现代浏览器中都有对DOM的基本实现。许多浏览器提供了对W3C标准的扩展,所以在使用时必须注意,文档可能会在多种浏览器上使用不同的DOM来访问。</p>

5. 两数之和

给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。

你可以假设每种输入只会对应一个答案。但是,数组中同一个元素不能使用两遍。

给定 nums = [2, 7, 11, 15], target = 9

因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]


原文地址:https://www.cnblogs.com/fuyanz/p/14291576.html